CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.
The counter-increment property sets how much the counter increments on each occurrence of a selector. Default increment is 1.
name − The name of a counter. The name can be any string value.
integer − Defines an increment for the named counter each time the element appears in the document. This increment can be zero, or even negative. If no integer is provided, the counter is incremented by one.
none − No increment is performed.
A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here we use the counters() function to insert a string between different levels of nested counters:
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |