Show count in li css

CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.

The value of a counter is manipulated through the use of counter-reset. counter-increment can be displayed on a page using the counter() or counters() function of the content property.

Using counters

To use a CSS counter, it must first be reset to a value (0 by default). To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".

ul.count {
  counter-reset: section;
  list-style-type: none;
}
ul.count li::before {
  counter-increment: section;
  content: counters(section,".") ". ";
}

<ul class="count">
   <li>Step</li>
   <li>Step</li>
   <li>Step</li>
   <li>Step</li>
</ul>