Personalizzare gli elenchi numerati con CSS 3

Quanto spesso un designer si è presentato da voi con un elenco numerato in cui i numeri erano stati inseriti in simpatici pallini colorati, quadrati e forme strane? Quanto tempo e codice serve per una cosa così banale? La risposta ad entrambe le domande è la stessa: troppo. In passato era necessario ricorrere ad accrocchi poco eleganti, o che richiedevano a chi scriveva i contenuti di conoscere non poca sintassi HTML.

Ma le cose sono cambiate e CSS arriva in nostro soccorso, ecco come personalizzare gli elenchi numerati con poche righe.

Creiamo una lista ordinata e assegniamo una classe per poterla personalizzare facilmente. Naturalmente potete usare anche l’elemento padre, per evitare a chi scrive i contenuti, magari in wordpress, anche questo semplice passaggio.

<ol class="nodopiano-numerata">
   <li>Questo è il primo elemento</li>
   <li>Questo è il secondo elemento</li>
   <li>Questo è il terzo elemento</li>
   <li>Questo è il quarto elemento</li>
   <li>Questo è il quinto elemento</li>
</ol>

Rimuoviamo tutti gli stili predefiniti e l’indicatore di lista, in questo caso il numero.
```
.nodopiano-numerata {
 margin-left: 0;
 padding-right: 0;
 list-style-type: none;
}
```
Grazie alla proprietà “counter-increment” siamo in grado di contare quanti elementi di quel tipo vengono generati.
```
.nodopiano-numerata li {
    counter-increment: numerazione;
}
```

Usiamo la pseudo-classe :before per scrivere il numero che leggiamo dal contatore appena creato e mettiamolo in un pallino color nodopiano ;)

.nodopiano-numerata li::before {
    content: counter(numerazione);
    margin-right: 5px;
    font-size: 80%;
    background-color:#3b97a1;
    color: white;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 50%;
}

Ed ecco la vostra lista ordinata e personalizzata usando solo CSS, adesso potete inserirla nel vostro prossimo progetto, noi l’abbiamo già fatto!

Fonte: (treehouse)