Задача: создать нумерованные блоки, которые автоматически нумеруются(без редактирования HTML). Причем номера могут быть стилизованы или выводится в каких-то определенных частях блока.
Решение: можно использовать переменные css. Счетчик counter можно перезапускать, увеличивать и выводить в блоке.
counter-reset: section; //обнулен
counter-increment: section; //+1
//а здесь выводим значение
content: "Секция " counter(section) ":";
Результат напоминает нумерованные списки, но возможностей больше.
Статья: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
