counter-reset

Definition

The counter-reset CSS property is used to reset CSS counters to a specific value. It typically sets a named counter to zero, but it can be set to other numbers as well. The property takes a counter’s name and an optional numeric value.

For instance, counter-reset: section; would set a counter named “section” to zero, providing a clean slate for something like a numbered section list.

Syntax

article {
  counter-reset: footnote;
}

Values

<name> optionally followed by initial value (default 0).
Multiple counters separated by spaces.

Practical Examples

article {
  counter-reset: footnote;
}

sup.footnote {
  counter-increment: footnote;
}

sup.footnote::after {
  content: counter(footnote);
}

Initialize counters before incrementing so numbering starts at the desired value.

HTML

Remember to document the API changes^* and notify the mobile team^*.

Notes: The counter was reset on the article element.

Code

<style>
article.fn-demo { counter-reset: fn; }
article.fn-demo sup { counter-increment: fn; }
article.fn-demo sup::after { content: counter(fn); font-size: 0.65rem; vertical-align: super; margin-left: 0.1rem; color: #2563eb; }
</style>
<article class="fn-demo space-y-3 text-sm text-slate-700">
  <p>Remember to document the API changes<sup>*</sup> and notify the mobile team<sup>*</sup>.</p>
  <p class="text-xs text-slate-500"><strong>Notes:</strong> The counter was reset on the article element.</p>
</article>

Tips & Best Practices

Reset counters at logical container boundaries (e.g., per chapter).
Set an explicit starting value when numbering should skip or start higher.

Accessibility & UX Notes

Counters inserted via pseudo-elements should reflect meaningful order for screen readers.

Browser Support

Supported fully in modern browsers.

counter-increment
counter-set
content.