Предыстория: когда мы видим в макете такой блок, велико искушение числа добавить, как html-текст. Но представьте, что пункты могут быть добавлены, убраны и редактировать числа заказчику может быть неудобно
CSS счётчики
Задача: создать нумерованные блоки, которые автоматически нумеруются(без редактирования 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
Терзаем задачу дальше?
Стилизация номеров css в этой статье https://html5.by/blog/ol-numbers-css-counter-styling/
Что делать, если нужно выводить ещё и 0, т.е. 01, 02,... ?
Добавить селектор, который изменит содержимое псевдоэлемента:
.ol_zeros li:before {
content: "0" counter(num) ".";
}
А если элементов возможно будет больше 10?
Тогда добавить псевдокласс по номеру потомка
.ol_zeros li:nth-child(-n+9):before {
content: "0" counter(num) ".";
}
Подробно в статье: https://snipp.ru/html-css/zeros-ol