Interprétation HTML d'un objet js littéral simple via un générateur

Côté JavaScript

	function* objectToDl(o)
	{
		yield '<dl>';
		for (let [k, v] of Object.entries(o))
		{
			let dd = typeof v === 'object' ?
				Array.from(objectToDl(v)).join('')
				: `'${v}'<span>,</span>`;
			yield  `<dt>${k}</dt><dd>${dd}</dd>`;
		}
		yield '</dl>';
	}

Côté CSS

dl {
	background: #80000022;
	border: 1px dotted maroon;
	display: inline-block;
	font-size: 1.2rem;
	margin-left: 1.2rem;
	overflow: hidden;
	padding-left: 2.4rem;
}
dl::before,
dl::after {
	content: '{';
	float: left;
	margin-left: -2rem;
}
dl::after {
	clear: both;
	content: '}';
}
dt,
dd {
	float: left;
}
dt {
	clear: left;
}
dd {
	margin-left: .4rem;
	position: relative;
}
dd:not(:last-child) > dl::after {
	content: '},';
}
dt::after {
	content: ':';
}
dd:last-child > span {
	display: none;
}