CSS Counters

Used before category names. CSS

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 {
   counter-reset: css-counter 0;