CSS counter-increment Property

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:

noneThis is the default value. No counter is incremented.
counter_name numThe 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.
initialSets the counter-increment property to its default value(none).
inheritInherits the counter-increment property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.counterIncrement = “myCounter 2”;