CSS counter-reset Property

What You’ll Learn

The counter-reset property creates or resets CSS counters — the starting point before counter-increment and content: counter().

Definition and Usage

The counter-reset CSS property creates or resets one or more CSS counters. Counters track the occurrence of elements and are often used for numbering items in a list, creating custom section counters, or managing complex numbering schemes in documents.

Place counter-reset on a container (such as body, an article, or a list) before using counter-increment on child elements and displaying values with content: counter(name).

📝 Syntax

The syntax lets you specify one or more counters and their initial values:

selector {
  counter-reset: name number;
}

Basic Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Syntax Rules

• The initial value is none — no counter is created or reset.
• Omitting the number defaults the start value to 0.
• Reset multiple counters: counter-reset: chapter section;.
• Nested elements can reset counters to scope numbering locally.
• Always pair with counter-increment and counter() for visible numbering.

💎 Property Values

The counter-reset property accepts counter names, optional start numbers, and none.

The CSS Counter System

Examples Gallery

Try document section numbering, custom start values, scoped list resets, and multiple counters.

<style>
  body {
    counter-reset: section;
  }
  h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
  }
</style>

<h2>Introduction</h2>
<h2>Background</h2>
<h2>Conclusion</h2>

.numbered {
  counter-reset: item 4;
}

.numbered li {
  counter-increment: item;
}

.numbered li::before {
  content: counter(item) ". ";
  font-weight: bold;
}

article {
  counter-reset: step;
}

article h3 {
  counter-increment: step;
}

article h3::before {
  content: "Step " counter(step) ": ";
  color: #2563eb;
  font-weight: 600;
}

.outline {
  counter-reset: chapter section;
}

.outline h2 {
  counter-increment: chapter;
  counter-reset: section;
}

.outline h2::before {
  content: "Chapter " counter(chapter) ": ";
}

💡 Best Practices