🔢 CSS counter-reset — Complete Tutorial

🌐 What Is counter-reset?

The counter-reset property initializes or resets aCSS counter — a feature that lets you automatically number elements using pure CSS (no JavaScript or extra HTML needed).

>>“CSS counters let you generate numbering, labels, and ordering directly from CSS.”

Note

✔ Works with counter-increment
✔ Used with content: counter(name)
✔ Great for auto-numbering sections, lists, steps, cards, etc.

📦 Basic Syntax

Syntax

counter-reset: counterName optionalStartValue;

• counterName → the name of the counter
• optionalStartValue → default is 0

📌 1. Resetting a Counter

Reset counter

body {
  counter-reset: section;
}

This creates a counter named section starting at 0.

📌 2. Using Counters to Auto-Number Elements

Auto-numbering

body {
  counter-reset: item;
}

h2::before {
  counter-increment: item;
  content: counter(item) ". ";
}

Every <h2> gets automatic numbering:1. Title, 2. Title, 3. Title ...

📌 3. Starting Counter at a Custom Value

Custom start

body {
  counter-reset: chapter 10;
}

First increment → 11

📌 4. Multiple Counters

Multiple counters

body {
  counter-reset: section 0 sub 0;
}

You can define several counters at once.

📌 5. Nested Counters (Chapters → Subsections)

Nested counters

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
  counter-increment: section;
}

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

h2 {
  counter-increment: subsection;
}

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

Produces:1, 1.1, 1.2, 2, 2.1 ...

📌 6. Using Counters in Lists (Custom List Styling)

Custom ordered list

ol {
  list-style: none;
  counter-reset: li;
}

li::before {
  counter-increment: li;
  content: counter(li) ") ";
}

Creates a clean, custom-numbered list.

🧩 7. Using counters with content() & strings

Styled counter

.step::before {
  counter-increment: step;
  content: "Step " counter(step) ": ";
  font-weight: bold;
}

📘 8. Roman Numerals, Letters & Other Styles

Counter style

h2::before {
  counter-increment: sec;
  content: counter(sec, upper-roman) ". ";
}
StyleExample
lower-alphaa, b, c
upper-alphaA, B, C
lower-romani, ii, iii
upper-romanI, II, III

🧪 Real-World Examples

1️⃣ Table of Contents Numbering

TOC numbering

.toc {
  counter-reset: toc;
}

.toc-item::before {
  counter-increment: toc;
  content: counter(toc) ". ";
}

2️⃣ Numbered Cards

Cards

.cards {
  counter-reset: card;
}

.card::before {
  counter-increment: card;
  content: "Card #" counter(card);
}

3️⃣ Numbered Steps / Workflow

Steps

.steps {
  counter-reset: step;
}

.step::before {
  counter-increment: step;
  content: "Step " counter(step);
  font-size: 1.2rem;
  font-weight: bold;
}

⚠️ Common Mistakes

  • ❌ Forgetting counter-reset → numbering doesn’t start
  • ❌ Using counter-reset inside the wrong element
  • ❌ Expecting counters to appear without content
  • ❌ Using increment without reset → counters continue forever

Note

✔ Place counter-reset on the container
✔ Use counter-increment on the repeated elements

🔥 Summary

counter-reset initializes CSS counters that allow auto-numbering of elements in pure CSS. It's perfect for headings, steps, lists, chapters, and structured documents.

>>“CSS counters replace JS for many numbering tasks — clean, automatic, and powerful.”

Learn more →MDN Docs 📘