CSS Counters

These counters are similar to variables, and their values can be incremented by CSS rules to track how many times they are used.

They enable easy CSS-based incrementing and display of numbers for generated content. Here is a list of properties associated with counters:

• counter-reset: It is used to create or reset a counter.
• counter-increment: It is used to increment the counter value.
• content: It is used to insert generated content.
• counter() or counters() function: It is used to add the value of a counter to an element.

Note:- Before using a CSS counter, it must be created with a counter-reset.

Input:-

Output:-

Nesting Counter

We can also create counters within the counter. It is called nesting of a counter.

Input:-

}

Output:-

Different level of Nesting Counter

We can create outlined lists by using nesting counters. It facilitates us to insert a string between different levels of nested counters.

Input:-

Output:-