List in style

Put some style on your html list.

<ul class="mystyle">
     <li>text 1</li>
     <li>text 2</li>
</ul>

.mystyle {
     counter-reset: style-counter;
}
.mystyle li {
     list-style: none;
}
.mystyle li:before {
     content: counter(style-counter);
     counter-increment: style-counter;
}

The numbers in list don’t have to be decimals. They can be anything that list-style-type can be. For example:

disc (• • •)
circle (○ ○ ○)
square (▪ ▪ ▪)
decimal (1 2 3)
decimal-leading-zero (01, 02, 03)
lower-roman (i ii iii)
upper-roman (I II III)
lower-greek (α β γ)
lower-latin (a b c)
upper-latin (A B C)
armenian (Ա Բ Գ)
georgian (ა ბ გ)
lower-alpha (a b c)
upper-alpha (A B C)

If you need to specify different “bullets”:
content: counter(my-counter, lower-roman);

Source: https://css-tricks.com/numbering-in-style/