Listas ordenadas não são os únicos elementos que podem ser numerados automaticamente. Graças às várias propriedades relacionadas ao contador, qualquer elemento pode ser.
body ( counter-reset: my-awesome-counter; ) section ( counter-increment: my-awesome-counter; ) section:before ( content: counter(my-awesome-counter); )Cada um começará respectivamente com “1”, “2”, “3” ou “4”.
Você pode controlar o estilo do contador separando a função do contador por vírgula. por exemplo, para fazê-los usar algarismos romanos:
section:before ( content: counter(my-awesome-counter, upper-roman); )Demo
No CodePen:
Mais Informações
- Especificação CSS3
- Documentos MDN
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 3.1+ | Nenhum | 9,2+ | 8+ | TBD | TBD |