CSS counter-increment Property

The CSS counter-increment Property is used to increment/decrement value of a counter. A CSS counter is a variable that is used to track how many times a variable is used.

Syntax:

counter-increment: none | identifier | initial | inherit;

Default Value:  none 

Property values:

none: This is the default value and by this no counters will be incremented.
Syntax:

counter-increment: none;

Example:

Output:

👁 Image

identifier: The identifier value is used to define which counter is to be incremented. This value also takes a number which defines how much the increment will take place. The default value of this increment value is 1 (if the selector has not been reset, then the default value will be 0). This value also takes the negative values as well.
Syntax:

counter-increment: identifier;

Example:

Output:

👁 Image

initial: This value sets the property to its default value.
Syntax:

counter-increment: initial;

Example:

Output:

👁 Image

inherit: This value inherits this property from its parent element.
Syntax:

counter-increment: inherit;

Example:

Output:

👁 Image

Supported Browsers The browsers supported by counter-increment property are listed below:  

• Google Chrome 2.0 and above
• Edge 12.0 and above
• Internet Explore 8.0 and above
• Firefox 1.0 and above
• Opera 9.2 and above
• Apple Safari 3.0 and above