CSS counter-reset Property

CSS counter-reset Property

The counter-reset property in CSS is used to create and initialize a counter that can be used with the counter-increment and content properties to generate automatic numbering (e.g., for lists, headings, or sections).

1. Syntax

selector {
  counter-reset: counter-name value;
}

✅ The counter is reset to the specified value (default is 0).

Value Options:

• counter-name – The name of the counter to reset.

• number (optional) – The starting value (default is 0).

2. Example – Simple Counter for Headings

h2 {
  counter-reset: section; /* Reset counter */
}

h2::before {
  counter-increment: section; /* Increase counter */
  content: "Section " counter(section) ": "; /* Display counter */
}

✅ Each <h2> will be automatically numbered:
Section 1: Heading
Section 2: Another Heading

3. Example – Nested Numbering (Multi-Level Counter)

body {
  counter-reset: section;
}

h2 {
  counter-increment: section;
  counter-reset: subsection; /* Reset subsection counter for each new section */
}

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

h3 {
  counter-increment: subsection;
}

h3::before {
  content: counter(section) "." counter(subsection) " ";
}

✅ Output for <h2> and <h3>:

Section 1: Introduction
1.1 Subtopic A
1.2 Subtopic B
Section 2: Methods
2.1 Experiment 1
2.2 Experiment 2

4. Example – Numbering List Items

ol {
  counter-reset: list-counter;
}

li {
  counter-increment: list-counter;
}

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

✅ Each <li> will be numbered automatically like an ordered list.

5. Example – Using Multiple Counters

body {
  counter-reset: section main-counter;
}

h1 {
  counter-increment: main-counter;
}

h1::before {
  content: "Main " counter(main-counter) " - ";
}

h2 {
  counter-increment: section;
}

h2::before {
  content: "Subsection " counter(section) ": ";
}

✅ This creates two separate counters, one for <h1> (main counter) and one for <h2> (subsection counter).

6. Best Practices

✔ Use counter-reset at the parent level to ensure numbering resets correctly.
✔ Combine with counter-increment to create structured numbering.
✔ Use nested counters for hierarchical numbering.
✔ Counters only work with content in ::before or ::after pseudo-elements.