CSS Counters: The CSS counter property is similar to the variables. CSS counters are controlled via CSS, and its values are incremented via rules of CSS to record how much they are applied.

These properties in CSS provide simple incrementing i.e., CSS based and representation of any number i.e., for various generated content.

Note: Before going to start using a counter, it should be made with the counter-reset.

Counter Properties

Some of the critical properties of the counter are listed and specified below:

counter-reset: This property is applied to reset or create a counter.

counter-increment: This attribute is applied to the counter values to increment them.

content: It is applied to add generated content.

counters() or counter() function: This property is applied to insert any counter value for an element.

Counter Example:

In the following example, we are incrementing every next element’s counter value and also make the counter to a page.

Look at the following example:

Explanation of above example- we can see that the counter is made for a page inside body selector. After that, it increments the value of the counter for every <h2> element and inserts “Section <value of the counter>:” for the starting of every <h2> element.

Output:

Nesting Counters

We can also make counters inside the counter, and known as counter nesting.

Look at the following example to understand the concept of nesting counter:

Explanation of above example- we can see that the counter is made for a section and other nesting counter called subsection is made inside section.

Output:

Distinct phases of a Nesting Counters

We can make an outlined list with the use of the nesting counters. The nesting counter provides us to add the string between distinct phases of the nested counters.

Look at the following example:

 Output:

Pin It on Pinterest

Share This