CSS Counters with ::before
Create automatic numbering systems using CSS counters and the counter() function.
What are CSS Counters?
CSS counters are variables maintained by CSS whose values can be incremented and displayed in generated content. They enable automatic numbering without JavaScript or manual number management in HTML.
counter-reset
counter-reset initializes (or resets) a counter. Place it on the element that contains the items to count.
.list {
counter-reset: step;
/* creates a counter named "step" starting at 0 */
}