CSS counter-increment

The CSS counter-increment property is used to increment the value of one or more CSS counters. Counters are like variables maintained by CSS whose values can be incremented or decremented to keep track of the occurrence of an element in a document.

To use the counter-increment property, you first need to define a counter using the counter-reset property. This property sets the initial value of the counter. Then, you can increment the counter using the counter-increment property whenever an element matches a selector.

Let's take a look at an example to better understand how the CSS counter-increment property works.

Result:


    
    
      
        
      
      
        First Section
        Second Section
        Third Section

In this example, we have defined a CSS counter named "section" using the counter-reset property with an initial value of 0. Then, we increment this counter by 1 for each <h2> element using the counter-increment property. We display the value of the counter before the content of each <h2> element using the content property.

When you view this example in a browser, you will see the following result:

Section 1: First Section

Section 2: Second Section

Section 3: Third Section

This demonstrates how the CSS counter-increment property can be used to increment a counter and display the value along with the content of an element.