Так что же это за счетчики CSS? Мы можем рассматривать их как переменные, поддерживаемые CSS. Правила CSS могут увеличивать значения, которые будут отслеживать, сколько раз они используются.
Использование счетчиков CSS
Чтобы использовать эти счетчики, мы должны сначала создать их с помощью функции counter-reset. Откуда бы вы ни вызвали этот сброс, он сбросит значение для этого счетчика (идентифицируемого по его имени).
Давайте установим счетчик в body и будем считать для каждого элемента p.
body {
counter-reset: paragraph;
}
p::before {
counter-increment: paragraph;
content: 'Paragraph ' counter(paragraph) ': ';
}
Если мы теперь создадим следующий HTML:
<p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p>
В итоге мы получаем такой результат.
Мы можем определять эти счетчики по своему усмотрению и сбрасывать их по мере выполнения.
Пользовательский сброс
Давайте рассмотрим возможность сбросов.
Например, у нас есть элементы h2 в качестве основного счетчика, и для каждого абзаца, внутри него, мы хотим показать другой счетчик.
Для демонстрации мы даже объединим вывод счетчиков.
Рассмотрим следующую структуру HTML.
<h2>First heading</h2> <p>Some text</p> <p>Some text</p> <p>Some text</p> <h2>Second heading</h2> <p>Some text</p> <p>Some text</p>
Затем мы можем легко создать индекс для каждого раздела следующим образом.
body {
counter-reset: heading;
}
h2 {
counter-reset: paragraph;
}
h2::before {
counter-increment: heading;
content: 'Section ' counter(heading) ': ';
}
p::before {
counter-increment: paragraph;
content: counter(heading) '.' counter(paragraph) ' ';
}
Что приведет к следующему:
Довольно круто, верно, это может быть для единичных случаев использования, но однажды вам могут понадобиться счетчики CSS.
Вы также можете ознакомиться с ними ниже.
See the Pen
Using CSS counters by Chris Bongers (@rebelchris)
on CodePen.
