Бесспорно, очень здорово решать проблемы верстки HTML-документа только с помощью CSS, абсолютно не прибегая к помощи JavaScript. CSS-счетчик - отличный пример такой реализации. Надеюсь, в один прекрасный день он Вам пригодится.

Для чего нужен CSS-счетчик?

Например, вместо ручной нумерации заголовков HTML-страницы:

<div>
  <h1>1. Первый раздел</h1>
  <p>какой-то текст</p>
  <h1>2. Второй раздел</h1>
  <p>какой-то текст</p>
</div>

Можно использовать код, расположенный ниже:

<div class="simple-example">
  <h1>Первый раздел</h1>
  <p>какой-то текст</p>
  <h1>Второй раздел</h1>
  <p>какой-то текст</p>
</div>

Внутри блока simple-example Вы сможете добавить любое количество заголовков, и все они будут пронумерованы без какого-либо дополнительного вмешательства.

Нужно лишь добавить следующие CSS-свойства:

.simple-example {
  /* инициализация счетчика */
  counter-reset: sectionCount; 
}
.simple-example h1 { 
  /* каждый последующий заголовок увеличит значение счетчика на 1 */
  counter-increment: sectionCount; 
}
.simple-example h1::before { 
  /* выводим порядковый номер и точку с пробелом перед каждым заголовком */
  content: counter(sectionCount)". "; 
}

Теперь вместо “Первый раздел” браузер выведет “1. Первый раздел”.

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