Create a counter (“my-sec-counter”) and increase it by one for each occurrence of the <h2> selector:
body {
/* 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
The counter-reset property creates or resets one or more CSS counters.
The counter-reset property is usually used together with the counter-increment property and the content property.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.counterReset=”section” Try it |
CSS Syntax
counter-reset: none|name number|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | Default value. No counters will be reset |
| id number | The id defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
