CSS counter is basically variable that can be used for numbering and values of CSS counters may be incremented by CSS rules.
For example, CSS counters are used to increment the numbering of the headings automatically.
In HTML, <ol> tag is used to give the ordered numbers to list items but CSS contains counter to give order elements in some other fashion.
CSS counters properties are as follows:
counter-reset
The counter-reset CSS property is used in combination with the counter-increment property for creating auto-incrementing counters, and with the content property to display the generated counter values.
counter-increment
The counter-increment CSS property increments counter values. This property is very useful for creating auto-numbering feature.
content
The content CSS property is used in combination with the ::before and ::after pseudo-elements to generate content in an element.
counter() or counters() function
The value of a counter can be displayed using either the counter() or counters() function in a content property. These two functions basically used to add the value of a counter to the element.
Nested counters
The counter within a counter is known as a nested counter. The nested counter is used to create heading and subheadings.
The below example shows the use of CSS counters with nested tags. The different counter is used for a different type of tags.
You can also use the counter to make outlined lists because a new instance of a counter is automatically created in child elements.
In this example, we use the counters() function to insert a string between different levels of nested counters.
In this example, we use the counters() function to insert a string between different levels of nested counters.