Aggiungere virgole ad una lista HTML con CSS
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!
html css ul
Commentami!