The counter-increment
property increases or decreases the value of one or more CSS counters.
This property is usually used in conjunction with the counter-reset
property and the content
property.
body {
counter-reset: my-counter;
}
div.ex:before {
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
none
Default value. No counters will be incremented.
id number
id
designates which counter to increment. number
designates the value that the counter is incremented to on each occurrence of the selector. number
‘s default value is 1 and negative values are allowed. If the id
refers to a counter that has not been initialized by counter-reset
, the default initial value is 0.
initial
Sets the property to its default value.
inherit
Inherits this property’s value from its parent item.
Have a code example of counter-increment
? Submit a codepen.io demo and we'll showcase it here ↴