counter-reset
`counter-reset` создаёт CSS-счётчик (или сбрасывает его), `counter-increment` увеличивает его на каждом подходящем элементе; значение выводится через `counter()`.
Синтаксис
counter-reset: name start; counter-increment: name step;Значения
| Параметр | Тип | Описание |
|---|---|---|
| name | ident | Любое имя счётчика, например `step`. |
| start | integer | Необязательно. Значение после сброса, по умолчанию 0. |
| step | integer | Необязательно. Сколько прибавляет `counter-increment`, по умолчанию 1; может быть отрицательным. |
Примеры
Пронумерованные шаги без <ol>:
<style>
.steps { counter-reset: step; }
.steps h3 { counter-increment: step; margin: 4px 0; }
.steps h3::before { content: "Step " counter(step) ": "; color: teal; }
</style>
<div class="steps">
<h3>Choose a plan</h3>
<h3>Enter your details</h3>
<h3>Pay</h3>
</div>Примечания
Сбрасывайте счётчик на контейнере, а увеличивайте на пунктах — если сбрасывать на каждом пункте, везде будет 1. counter-set задаёт счётчику значение, не создавая новый. У списков есть встроенный счётчик list-item, по нему нумеруются пункты <ol>.
См. также
- counter() — Выводит значение CSS-счётчика в `content`; `counters()` выводит сразу все вложенные уровни, например 2.1.3.
- content — Содержимое псевдоэлементов `::before` и `::after`.
- ::before — Создаёт виртуальный первый дочерний элемент — для декоративного текста или фигур.
- @counter-style — Описывает собственный стиль нумерации списка, который затем можно использовать в `list-style-type` и `counter()`.
Вопросы и ответы по теме
В учебнике
- Счётчики CSS — Автоматическая нумерация средствами CSS — counter-reset, counter-increment, функции counter() и counters(), нумерованные заголовки, вложенная нумерация 1.1, 1.2 и правило @counter-style.