counter-increment

Using the counter-increment property, you can specify the number by which the value of the CSS counter will be increased.

Let's increase the counter value example on the <li> element by 2:

        
          
          li {  counter-increment: example 2;}
          li {
  counter-increment: example 2;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

For example, there is some counter on the <li> element set by the counter-reset property. To start increasing the numerical value of the counter, we use the counter-increment property. If we want to increase the counter by more than one, for example by two, we specify this value after the counter name.

To increase the counter value on the element, you need to specify the counter name and a numerical value in the property value.

By default, the numerical value is equal to 1, unless otherwise specified.

The counter example on the <li> element will be increased by 1:

        
          
          li {  counter-increment: example;}
          li {
  counter-increment: example;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can specify the keyword none to not change the counter step value — this is the default value.

        
          
          li {  counter-increment: none;}
          li {
  counter-increment: none;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

New counters can be created not only by the counter-reset property. Let's imagine a situation where you apply only the counter-increment property to an element and specified a non-existent counter name in its property value.

        
          
          li {  counter-increment: new 2;}
          li {
  counter-increment: new 2;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

In this case, a new counter named new with an initial value of 0 will be created on the <li> element. After creating the counter, the counter-increment property starts to operate as usual.

Counter names are case-sensitive. For example, the values example and EXAMPLE are two different, unrelated counters.

You cannot use the keywords: none, initial, inherit, unset, default as counter names.

In the property value, you can specify 1 or more counters. They are listed in order, separated by spaces.

        
          
          li {  counter-increment: count1 -1 count2 99;}
          li {
  counter-increment: count1 -1 count2 99;
}

        
        
          
            
            Copy
            Copied
            Failed to copy