Упорядоченные списки - не единственные элементы, которые можно нумеровать автоматически. Благодаря различным свойствам, связанным со счетчиком, любой элемент может быть.
body ( counter-reset: my-awesome-counter; ) section ( counter-increment: my-awesome-counter; ) section:before ( content: counter(my-awesome-counter); )Каждый будет соответственно начинаться с «1», «2», «3» или «4».
Вы можете управлять стилем счетчика, разделяя функцию счетчика запятой. например, чтобы они использовали римские цифры:
section:before ( content: counter(my-awesome-counter, upper-roman); )Демо
На CodePen:
Дополнительная информация
- Спецификация CSS3
- Документы MDN
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 3.1+ | Любой | 9.2+ | 8+ | TBD | TBD |