counter()
Выводит значение CSS-счётчика в `content`; `counters()` выводит сразу все вложенные уровни, например 2.1.3.
Синтаксис
content: counter(name, style) | counters(name, "separator");Параметры
| Параметр | Тип | Описание |
|---|---|---|
| name | ident | Счётчик, созданный через `counter-reset`. |
| style | list-style-type | Необязательно. Стиль нумерации: `decimal` (по умолчанию), `upper-roman`, `lower-alpha` или имя из `@counter-style`. |
| separator | string | Только `counters()`. Строка между уровнями, например `"."`. |
Примеры
Главы с римскими цифрами:
<style>
body { counter-reset: chapter; }
h3 { counter-increment: chapter; }
h3::before { content: counter(chapter, upper-roman) ". "; }
</style>
<h3>Beginnings</h3>
<h3>The journey</h3>
<h3>Home again</h3>Вложенная нумерация 1, 1.1, 1.2 через counters():
<style>
ol { counter-reset: item; list-style: none; padding-left: 16px; }
li { counter-increment: item; }
li::before { content: counters(item, ".") " "; color: teal; }
</style>
<ol>
<li>Install<ol><li>Download</li><li>Unpack</li></ol></li>
<li>Configure</li>
</ol>Примечания
counter() используется только внутри content, поэтому работает с ::before, ::after и ::marker. counters() опирается на то, что каждый вложенный список снова сбрасывает счётчик, — так появляется новый уровень.
См. также
- counter-reset — `counter-reset` создаёт CSS-счётчик (или сбрасывает его), `counter-increment` увеличивает его на каждом подходящем элементе; значение выводится через `counter()`.
- content — Содержимое псевдоэлементов `::before` и `::after`.
- @counter-style — Описывает собственный стиль нумерации списка, который затем можно использовать в `list-style-type` и `counter()`.
- list-style — Вид маркеров списка: тип, положение и картинка.
Вопросы и ответы по теме
В учебнике
- Счётчики CSS — Автоматическая нумерация средствами CSS — counter-reset, counter-increment, функции counter() и counters(), нумерованные заголовки, вложенная нумерация 1.1, 1.2 и правило @counter-style.