Custom symbols nelle liste in HTML

In questo articolo vediamo come customizzare i symbols nelle liste HTML.

Per farlo useremo solo CSS, senza librerie aggiuntive.

Quindi, supponiamo di avere una lista del genere:

<ul>
    <li>UNO</li>
    <li>DUE</li>
    <li>TRE</li>
    <li>QUATTRO</li>
    <li>CINQUE</li>
</ul>

Adesso diamogli questo stile:

ul {
    list-style-type: custom;
}

@counter-style custom {
    system: cyclic;
    suffix: "--";
    symbols: