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;
}