CSS counter-increment property is used to increase or decrease the value of a CSS counter(s) by a given value. It is generally used with the counter-reset and content property.
By default, the value of the counter increases by 1. Therefore, the value of myCounter in the example below increases by 1 for each occurrence of <h2> tag. Try it out to see how it works:
Example:
body{
counter-reset: myCounter; /* sets myCounter to 0 */
}
h2::before{
counter-increment: myCounter; /* Increments myCounter by 1 */
content: counter(myCounter) ": ";
}
we can also specify the number by which the counter should increase.
In the example below, counter myCounter increases by a value of 2 on each occurrence of a <h2> tag. Try it out:
Example:
body{
counter-reset: myCounter; /* sets myCounter to 0 */
}
h2::before{
counter-increment: myCounter 2; /* Increase myCounter by 2 */
content: counter(myCounter) ": ";
}
The counter-increment property can also accept a negative value. The negative value represents that the given counter will decrease by this specified number.
In the example below, the counter myCounter decreases by 2 on each occurrence of a <h2> tag. Try it out:
Example:
body{
counter-reset: myCounter; /* sets myCounter to 0 */
}
h2::before{
counter-increment: myCounter -2; /* Decrease myCounter by 2 */
content: counter(myCounter) ": ";
}
CSS Syntax
The counter-increment property has the below syntax:
counter-increment: none| counter_name num|initial|inherit;
Property Values
The counter-increment property accepts the following values:
| none | This is the default value. No counter is incremented. |
| counter_name num | The counter_name specifies the counter to be incremented. The space-separated value(num) represents the value by which the counter will be incremented. By default, the counter increments by one, and it can be positive, negative, or zero. |
| initial | Sets the counter-increment property to its default value(none). |
| inherit | Inherits the counter-increment property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.counterIncrement = “myCounter 2”; |
