CSS counter-reset property is used to reset a CSS counter. It is used in combination with the counter-increment and content property to increment and display the counter value.
By default, the counter-reset property resets the counter to 0. Therefore, the code in the example below creates a counter myCounter and resets it to 0. Try it out:
Example:
body{
counter-reset: myCounter; /* Resets myCounter to 0 */
}
h2::before{
counter-increment: myCounter; /* Increments myCounter by 1 */
content: counter(myCounter) ": ";
}
We can also reset the counter to any desired number we want. This number can be positive, negative, or zero. In the example below, the counter-reset property resets myCounter to 5. You can also try it with a negative value.
Example:
body{
counter-reset: myCounter 5; /* Resets myCounter to 5 */
}
h2::before{
counter-increment: myCounter; /* Increments myCounter by 1 */
content: counter(myCounter) ": ";
}
CSS Syntax
The counter-reset property has the below syntax:
counter-reset: none|counter number|initial|inherit;
Property Values
The counter-reset property accepts the following values:
| none | This is the default value. No counter will be reset. |
| counter number | The first parameter(counter) defines the name of the counter. The second parameter defines the number to which the counter will be reset. The default value of the second parameter is 0 and it can be positive, negative, or 0. |
| initial | Sets the counter-reset property to its default value(none). |
| inherit | Inherits the counter-reset property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.counterReset = “myCounter 5”; |
