CSS

CSS Counters allow you to automatically number elements using pure CSS, without manually adding numbers in HTML. This is useful for automating ordered lists, section numbers, and dynamic numbering in content.

---

🔹 1. What are CSS Counters?

CSS counters work like variables in CSS. You can initialize, increment, and display them using special CSS properties.

How CSS Counters Work

1. Initialize (counter-reset) – Sets the starting value of a counter.
2. Increment (counter-increment) – Increases the counter for specific elements.
3. Display (content: counter(name)) – Shows the counter in the content property (only works with ::before and ::after pseudo-elements).

---

🔹 2. Basic Example: Numbering Sections

👉 Let’s automatically number headings (h2).

🔹 HTML

<h2>Introduction</h2>
<h2>Features</h2>
<h2>Conclusion</h2>

🔹 CSS

/* Initialize the counter on the body */
body {
    counter-reset: section; 
}

/* Increment and display the counter before each h2 */
h2::before {
    counter-increment: section; 
    content: "Section " counter(section) ". ";
    font-weight: bold;
}

✅ Output:

Section 1. Introduction
Section 2. Features
Section 3. Conclusion

👉 Each h2 gets numbered automatically.

---

🔹 3. Nested Counters (Multi-Level Numbering)

👉 Useful for numbering chapters, sections, and subsections.

🔹 HTML

<h1>Chapter 1</h1>
<h2>Introduction</h2>
<h2>Features</h2>
<h1>Chapter 2</h1>
<h2>Overview</h2>
<h2>Details</h2>

🔹 CSS

/* Initialize the counters */
body {
    counter-reset: chapter;
}

h1 {
    counter-increment: chapter; /* Increase chapter count */
    counter-reset: section; /* Reset section count when a new chapter starts */
}

h1::before {
    content: "Chapter " counter(chapter) ". ";
    font-weight: bold;
}

h2 {
    counter-increment: section; /* Increase section count */
}

h2::before {
    content: counter(chapter) "." counter(section) " ";
    font-weight: bold;
}

✅ Output:

Chapter 1. Introduction
1.1 Introduction
1.2 Features
Chapter 2. Overview
2.1 Overview
2.2 Details

👉 Multi-level numbering achieved dynamically! 🚀

---

🔹 4. CSS Counters in Lists (Custom Ordered Lists)

👉 You can style ordered lists (<ol>) without using <li> numbers.

🔹 HTML

<ul class="custom-list">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

🔹 CSS

.custom-list {
    counter-reset: list-counter;
}

.custom-list li {
    counter-increment: list-counter;
}

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

✅ Output:

1. Item One
2. Item Two
3. Item Three

👉 Styled ordered lists using counters instead of <ol>.

---

🔹 5. Styling CSS Counters

You can customize counter appearance using CSS properties.

🔹 Add Parentheses

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

✅ Output:
(1) Introduction
(2) Features

---

🔹 Use Roman Numerals

h2::before {
    content: counter(section, upper-roman) ". ";
}

✅ Output:

I. Introduction
II. Features
III. Conclusion

---

🔹 Use Letters Instead of Numbers

h2::before {
    content: counter(section, lower-alpha) ") ";
}

✅ Output:

a) Introduction
b) Features
c) Conclusion

---

📌 Conclusion

✔ CSS Counters allow automatic numbering without modifying HTML.
✔ Great for automated lists, headings, and multi-level numbering.
✔ Fully customizable (numbers, Roman numerals, letters, styles).