counterreset

Counterreset is a CSS property used to manage CSS counters, which are numeric values that can be incremented and displayed to create automatic numbering for elements such as headings, figures, or sections. The property resets one or more named counters to a specified value within the scope of the element it is applied to, or to a default starting value when no value is given. Counters are commonly used in conjunction with the counter-increment property and the content property to generate visible numbering.

Syntax and usage

- counter-reset: name [value] [ , name [value] ... ];

- The value is an integer. If omitted, the counter resets to zero for the next increment.

- The scope of the reset is the element and its descendants, allowing local or inheritable numbering schemes.

Typical workflow

- Define a counter on a container: body { counter-reset: section; }

- Increment the counter on target elements: h2 { counter-increment: section; }

- Display the counter with a pseudo-element: h2::before { content: "Section " counter(section) ": "; }

You can reset a counter to a nonzero value to adjust numbering, for example: counter-reset: item 0; to start from 1 after the first increment. Multiple counters can be reset in a single declaration, such as: counter-reset: chapter 0, figure 0.

Compatibility and scope

Counter reset works with CSS counters and is widely supported across modern browsers. It is part of the CSS counters module, alongside counter-increment and the counters() function for hierarchical numbering. Its use is mainly for styling and presentation while preserving semantic structure.

See also

Counter, counter-increment, counters, content, generated content.