Ho scoperto che i CSS in realtà sono più "potenti" di quello che sembra, e che tante cose che facciammo ad esempio in Javascript, le possiamo direttamente con qualche trick.

Ad esempio, oggi aggiungiamo le virgole ad una lista HTML; in genere per farlo usiamo il linguaggio lato server (perchè magari estraiamo la lista da db e poi la elaboriamo).

Questa la lista di esempio:

<ul class="macchine">
	<li class="macc vir">Ferrari</li>
	<li class="macc vir">Porche</li>
	<li class="macc vir">Mercedes</li>
	<li class="macc vir">BMW</li>
</ul>

Questo il CSS:

.macchine {
	display: flex;
	padding-inline-start: 0;
	list-style: none;
}

.macc {
	display: none;
}

.macc.vir {
	display: inline-block;
}

.macc.vir ~ .macc.vir::before {
	content: ', ';
}

Come potete vedere, la virgola non viene inserita dopo l'ultimo elemento.

Vi lascio il divertimento di capire il trucco!

Enjoy!