Counters (ex: counter-reset)

CSS counters can be used whenever you need a counting system on your web page. Some of the best use cases are:

  • Numbering complex lists
  • Create dynamic pagination links
  • Numbering steps in an onboarding system.

CSS counters contains the following properties:

  • counter-reset: It is used to reset a counter.
  • counter-increment: It basically increments a counter value.
  • content: It is used to generate content.
  • counter() or counters() function: Adds the value of a counter to an element
content: counters(css-counters, ".") " ";
<div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
</div>
div {
   counter-reset: css-counter 0; 
}