CSS counter-reset Property

Definition and Usage

The counter-reset property creates one or more named CSS counters and sets each to a starting value. A bare name starts at 0. After that, use counter-increment and print the value with content and counter().

The initial value is none. It is not inherited. Put the reset on a parent so every child shares the same counter scope.

CSS Syntax

List one or more counter names, each optionally followed by an integer. Omit the integer to start at 0.

Property Values

How to Use counter-reset

Reset on a parent, increment on each item, then print with content.

1. On a parent, set counter-reset: section (or another name, optionally with a start integer).
2. On each child that should advance the count, set counter-increment: section.
3. On ::before (or ::after), set content: counter(section).
4. Use a new reset on a nested parent when a group should restart at the same start value.

Live Preview

The same three lines keep counter-increment: section. Change only the parent counter-reset start value.

CSS Examples

Each snippet shows only what the counter needs: reset, increment, and content. Use Try It Yourself for a live editor.

<style>
  body {
    counter-reset: section;
  }

  h2 {
    counter-increment: section;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>Intro</h2>
<h2>Setup</h2>
<h2>Next steps</h2>

<style>
  body {
    counter-reset: section 2;
  }

  h2 {
    counter-increment: section;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<h2>Part A</h2>
<h2>Part B</h2>
<h2>Part C</h2>

<style>
  .group {
    counter-reset: section;
  }

  h2 {
    counter-increment: section;
  }

  h2::before {
    content: counter(section) ". ";
  }
</style>

<div class="group">
  <h2>Alpha</h2>
  <h2>Beta</h2>
</div>
<div class="group">
  <h2>Gamma</h2>
  <h2>Delta</h2>
</div>

Key Takeaways