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

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

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

  
1. Первый раздел
  
какой-то текст
  
2. Второй раздел
  
какой-то текст

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

  
Первый раздел
  
какой-то текст
  
Второй раздел
  
какой-то текст

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

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

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

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

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