Declare a CSS counter

counter-reset

Declare a CSS counter, for use in a "content" property value, and set or reset its value to 0.

Property values

The counter-reset property is used in tandem with the counter-increment property. They both expect a counter-name, which is arbitrarily chosen.

The first element in a document that matches a CSS selector which has a counter-reset property, will cause that counter-name to be given a value of 0. If another element in the document subsequently matches that same selector, the counter's value will be reset back to 0.

Note that there is no counter-set property. When a counter-reset property is first encountered, it acts as if it were such a thing.

Examples

/* Decaring a CSS counter */
h1:first-of-type {
counter-reset: C;
}
h1::before {
counter-increment: C;
content: "Section " counter(C) ":";
}
counter-reset

style > generate > counter-resetDeclare a CSS counter

🔎