counter-increment

The counter-increment property is used to specify the increment value for one or more CSS counters.

It takes one or more identifiers as a value, which specify the names of the counters that are to be incremented. Each counter name is optionally followed by an optional <integer> value that indicates by how much the counter is incremented for every occurrence of the element that you’re numbering. The default increment is 1. Zero and negative integers are allowed. If a negative integer is specified, the counter is decremented.

The following is an example defining a counter using the counter-reset property, and then specifying that is will be incremented by one (the default value used if you don’t specify an integer value) for every occurrence of an h2 heading inside an article:

article {
    /* define and reset counter */
    counter-reset: section; /* 'section' is the name of the counter */
}

article h2 {
    /* increment the counter by 1 for every occurrence of the h2 heading */
    counter-increment: section; /* equivalent to counter-increment: section 1; */
}
                

The following are all valid counter-increment values:

/* increment 'my-counter' by 2 for every occurrence of the element */
counter-increment: my-counter 2; 

counter-increment: list_item;

/* increments the counter 'SomeCounterName222' by 2 for every occurrence of the element */
counter-increment: SomeCounterName222 3; 

/* will decrement the counter by 1 for every occurrence of the element */
counter-increment: silly-name -1; 
                

The counter-increment property is used in conjunction with the counter-reset property. For more information on how to use the counter-increment property to increment counters, see the Using Counters section in the Counters entry.