Что такое CSS-счетчики? Их можно рассматривать, как переменные CSS, значения которых увеличиваются по определенным правилам.

Чтобы инициализировать счетчик нужно пройти процедуру его сброса counter-reset с указанием произвольного названия счетчика (пользовательского идентификатора) в качестве параметра. Сброс счетчика может быть CSS-свойством любого HTML-элемента.

Давайте создадим счетчик paragraph и посчитаем все элементы p страницы:

body {
  counter-reset: paragraph;
}

p::before {
  counter-increment: paragraph;
  content: 'Параграф ' counter(paragraph) ': ';
}

Если теперь создать HTNL-структуру:

<p>Мой текст</p>
<p>Мой текст</p>
<p>Мой текст</p>
<p>Мой текст</p>
<p>Мой текст</p>

Получим результат:

Параграф 1: Мой текст
Параграф 2: Мой текст
Параграф 3: Мой текст
Параграф 4: Мой текст
Параграф 5: Мой текст

Порядок применения и сброса счетчиков может быть определен разработчиком, в соответствии с решаемой задачей.

Например, можно создать основной счетчик первого уровня для заголовков h2. А для каждого абзаца p, находящегося внутри раздела, начиниающегося с заголовка h2, определить внутренний счетчик второго уровня.

Представим такую HTML-структуру:

<h2>Первый заголовок</h2>
<p>Мой текст</p>
<p>Мой текст</p>
<p>Мой текст</p>
<h2>Второй заголовок</h2>
<p>Мой текст</p>
<p>Мой текст</p>

Для того, чтобы счетчики работали верно, можно предложить следующий вариант реализации CSS:

body {
  counter-reset: heading;
}
h2 {
  counter-reset: paragraph;
}
h2::before {
  counter-increment: heading;
  content: 'Раздел ' counter(heading) ': ';
}
p::before {
  counter-increment: paragraph;
  content: counter(heading) '.' counter(paragraph) ' ';
}

Результат:

Раздел 1: Первый заголовок
1.1 Мой текст
1.2 Мой текст
1.3 Мой текст
Раздел 2: Второй заголвок
2.1 Мой текст
2.2 Мой текст

Получилось довольно интересное и элегантное решение, которое может пригодиться в тех случаях, когда требуется создать многоуровневые списки.

Спасибо за внимание.