CSScounter-increment Property
Example
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector:
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: "Section " counter(my-sec-counter) ". ";
}
More "Try it Yourself" examples below.
Definition and Usage
Thecounter-increment property increases or decreases the value of one or more CSS counters.
Thecounter-increment property is usually used together with thecounter-reset property and thecontent property.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.counterIncrement = "subsection";Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
Property Values
| Value | Description |
|---|---|
| none | Default value. No counters will be incremented |
| id number | Theid defines which counter to increment. Thenumber sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. Ifid refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
| initial | Sets this property to its default value.Read aboutinitial |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}
Example
Numbering sections and sub-sections with "Section 1:", "1.1", "1.2", etc.:
/* Set "section" to 0 */
counter-reset: section;
}
h1 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before {
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Example
Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}
Related Pages
CSS reference:::before pseudo element
CSS reference:::after pseudo element
CSS reference:content property
CSS reference:counter-reset property
CSS functions:counter() function
HTML DOM reference:counterIncrement property
