CSS Counters
CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules to track how many times they're used. This lets you automatically number headings or other elements.
How to Use CSS Counters
To use CSS counters, you first need to create one with counter-reset. Then, you increment it with counter-increment. Finally, you display it using the content property, typically with the ::before or ::after pseudo-element.
counter-reset- Creates or resets a counter.counter-increment- Increments a counter value.content- Inserts generated content.counter()orcounters()function - Adds the value of a counter to an element.
Example: Numbering Sections
css
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Test Yourself with an Exercise
Which property is used to create or reset a counter?