? CSS Counters

⚡ Quick Overview

CSS Counters are like small variables managed entirely by CSS. They automatically increment and can be displayed using pseudo-elements like ::before and ::after. This makes them perfect for:

Numbered steps in tutorials or processes.
Custom-styled ordered lists.
Multi-level outlines like Chapter 1.2, 1.3.4, etc.
Automatic numbering without manually editing your HTML.

? Key Concepts

Counter variable: A named counter (like section or chapter) that CSS can increase or reset.
counter-reset – creates or resets a counter to a starting value.
counter-increment – increases the value of a counter (default is +1).
counter() – reads the current counter value and turns it into text.
Usually used with ::before / ::after to visually show the number.
Counters can be nested, e.g., chapter + section, to create hierarchical numbering.

? Syntax & Theory

A basic pattern for using CSS counters with a list is:

Reset the counter on the parent element (like ol).
Increment the counter on each repeated child (like li).
Use ::before or ::after to display the counter value.

? View Code Example – Basic List Counter

/* Basic ordered list counter setup */
ol {
  counter-reset: section;
}

li {
  counter-increment: section;
}

li::before {
  content: "Section " counter(section) ": ";
  font-weight: 600;
}

? Live Output & Explanation

Example: Numbered Setup Steps

With the CSS above applied, this HTML:

Uses a counter named section.
Increments it on each <li>.
Shows the text "Section X: " before every list item.

Rendered structure might look like:

Install the application
Create your profile
Start using the dashboard

Visually, each item will appear as: Section 1: Install the application, etc., without you needing to type “Section 1 / Section 2” manually.

? Common Properties

These are the three key properties you use with counters:

Property	Description	Example
`counter-reset`	Initializes or resets a counter.	`counter-reset: section;`
`counter-increment`	Increments the counter by 1 (or more).	`counter-increment: section;`
`content`	Displays the counter using `::before` or `::after`.	`content: "Step " counter(section);`

? Nested Counters (Chapters & Sections)

You can nest counters to create multi-level numbering like Chapter 1.1, Chapter 1.2, etc. A common pattern:

Reset a chapter counter on <body>.
Increment chapter on every <h2> (chapter title).
Reset a section counter every time a new chapter starts.
Increment section on every <h3> (sub-section).

? View Code Example – Nested Chapter & Section Counters

/* Set up a chapter counter for the whole page */
body {
  counter-reset: chapter;
}

/* Each h2 is a chapter: increase chapter and reset section numbers */
h2 {
  counter-increment: chapter;
  counter-reset: section;
}

/* Show "Chapter 1. " before each h2 */
h2::before {
  content: "Chapter " counter(chapter) ". ";
}

/* Each h3 is a section inside the current chapter */
h3 {
  counter-increment: section;
}

/* Show "1.1 ", "1.2 " etc. before each h3 */
h3::before {
  content: counter(chapter) "." counter(section) " ";
}

? Tips

Use counters for dynamic outlines, steps, FAQs, and auto-numbered headings.
You can reset and increment multiple counters at once, e.g., counter-reset: step 1 item;.
Keep your HTML semantic; counters work great with headings and lists.
Combine counters with styling (colors, fonts, spacing) for professional-looking docs.
Remember: counters are purely visual – they don’t change the actual HTML content.

? Practice Tasks

Create a nested counter system for chapters and sections using h2 (chapters) and h3 (sub-sections) like in the example above.
Build a “Step 1 / Step 2 / Step 3” process list using ol, li, and ::before with a step counter.
Make an FAQ section where each question is automatically numbered (Q1, Q2, Q3...) using a counter on heading elements.
Challenge: Create three levels of nested counters (e.g., 1.1.1) for chapter, section, and sub-section headings.