Счетчик CSS

ol имеет нумерацию

1. item
2. item
3. item

другие теги не имеют нумерацию

Три свойства CSS позволят задать нумерацию любому селектору

counter, reset, increment

html

<div class="num">
    <p> lorem </p>
    <p> lorem </p>
    <p> lorem </p>
</div>

css

.num {
    counter-reset: mynum; // mynum -  произвольное имя
}
.num  p {
    counter-increment: mynum;
}

.num p::before {
    content: counter(mynum)'. ';
}            
        

Изменение начала отсчета и шага

css

.num-step {
            counter-reset: mystep 30; // 30 -  начало отсчета
        }
        .num-step  p {
            counter-increment: mystep -10; // -10 это шаг
        }
        
        .num-step p::before {
            content: counter(mystep)'. ';
        }            
    

Изменение вида отображаемых цифр

Цифры находятся в свойстве content в качестве аргументов. К ним применяются свойства CSS текущего селектора и особые свойства выбора типа отображения цифр, аналогичные свойству list-style-type:

                .num-step p::before {
                    content: counter(mystep, upper-roman)'. ';
                }