CSS counters are type of “variables”. They are maintained by CSS and their values can be incremented by CSS rules.
Their values are based on how many times they are used on the page.
CSS counters let you adjust the appearance of content based on its location in a document.
For example, you can use counters to automatically number the headings in a webpage.
CSS Counter Properties
counter-reset – Creates or resets a counter
counter-increment – Increments a counter value
content – Inserts generated content
counter() or counters() function – Adds the value of a counter to an element
To use a CSS counter, it must first be initialized to a value with the counter-reset property (0 by default).
The same property can also be used to change its value to any specific number.
Once initialized, a counter’s value can be increased or decreased with counter-increment.
The counter’s name must not be “none”, “inherit”, or “initial”; otherwise the declaration is ignored.
The value of a counter can be displayed using either the counter() or counters() function in a content property.
counter() function
The counter() function has two forms: ‘counter(name)’ or ‘counter(name, style)’.
The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element.The counter is rendered in the specified style (decimal by default).
counters() function
The counters() function also has two forms: ‘counters(name, string)’ or ‘counters(name, string, style)’.
The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string.
The counters are rendered in the specified style (decimal by default).
Example
Nesting counters
A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements.
Using the counters() function, separating text can be inserted between different levels of nested counters.
Example
Sources
counter list
