VITSOLS
2025-10-07
CSS Counters Explained
Have you ever wanted to automatically number sections, lists, or headings without typing numbers manually in HTML?
CSS Counters make that possible — you can generate dynamic numbering purely with CSS, making your layout cleaner and more flexible.
What are CSS Counters?
CSS Counters are variables maintained by CSS that allow you to track and display numeric values using the content property.
You can use them to automatically number:
- Headings
- Chapters or sections
- Ordered lists
- Figures and tables
- FAQs or steps in a tutorial
Key CSS Counter Properties
Let’s understand each property step-by-step with examples.
1. counter-reset
Initializes (or resets) a counter to a specific value.
CSS
body {
counter-reset: section; /* start counting sections */
}
2. counter-increment
Increases (or decreases) a counter’s value each time the element appears.
CSS
h2 {
counter-increment: section;
}
3. counter()
Displays the current value of a counter inside generated content.
CSS
h2::before {
content: "Section " counter(section) ": ";
}
4. counters()
Used when you have nested counters, such as sections and sub-sections.
CSS
h3::before {
content: counters(subsection, ".") " ";
}
Example 1: Automatic Section Numbering
html
<body>
<h2>Introduction</h2>
<h2>Overview</h2>
<h2>Implementation</h2>
</body>
CSS
body {
counter-reset: section;
}
h2 {
counter-increment: section;
}
h2::before {
content: "Section " counter(section) ": ";
color: #3498db;
font-weight: bold;
}
Output:
less
Section 1 : Introduction
Section 2 : Overview
Section 3 : Implementation
Example 2: Nested Counters (Sections & Subsections)
html
<body>
<h2>Chapter</h2>
<h3>Subchapter</h3>
<h3>Subchapter</h3>
<h2>Another Chapter</h2>
<h3>Subchapter</h3>
</body>
CSS
body {
counter-reset: chapter;
}
h2 {
counter-reset: subchapter;
counter-increment: chapter;
}
h2::before {
content: "Chapter " counter(chapter) ": ";
color: #e67e22;
}
h3 {
counter-increment: subchapter;
}
h3::before {
content: counter(chapter) "." counter(subchapter) " ";
color: #2ecc71;
}
Output:
less
Chapter 1 : Chapter
1.1 : Subchapter
1.2 : Subchapter
Chapter 2 : Another Chapter
2.1 Subchapter
Example 3: Using counters() for Nested Lists
html
<ol class="faq">
<li>Question 1
<ol>
<li>Answer A</li>
<li>Answer B</li>
</ol>
</li>
<li>Question 2</li>
</ol>
CSS
.faq {
counter-reset: item;
}
.faq li {
countent: counters(item, ".") " ";
font-weigh: bold;
}
h2::before {
content: "Chapter " counter(chapter) ": ";
color: #e67e22;
}
Output:
less
1 Question 1
1.1 Answer A
1.2 Answer B
2 Question 2
Real-Time Uses of CSS Counters
- ✅ 1. Auto-numbering headings or chapters
- ✅ 2. Creating table or figure numbers dynamically
- ✅ 3. Numbering steps in instructions or FAQs
- ✅ 4. Styling nested ordered lists uniquely
- ✅ 5. Simplifying content updates without changing HTML manually.
Benefits of Using CSS Counters
- 💡 Less HTML clutter: No need to hardcode numbers.
- 🎯 Consistent numbering: Updates automatically when items are added or removed.
- ⚡ Better maintainability: Especially useful for blogs, eBooks, or documentation sites.
- 🌐 Enhanced accessibility: Keeps semantic HTML clean for screen readers.
Best Practices
- Always reset counters logically (e.g., chapters reset subchapters).
- Combine with pseudo-elements (::before, ::after) for clean layout.
- Test in multiple browsers; most modern browsers support counters fully.
- Keep fallback content if numbering is essential for user understanding.