CSS Counters with ::before
Create automatic numbering systems using CSS counters and the counter() function.
CSS Counters with ::before is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What are CSS Counters?
CSS counters are variables maintained by CSS whose values can be incremented and displayed in generated content. They enable automatic numbering without JavaScript or manual number management in HTML.
counter-reset
counter-reset initializes (or resets) a counter. Place it on the element that contains the items to count.
.list {
counter-reset: step;
/* creates a counter named "step" starting at 0 */
}counter-increment
counter-increment increases the counter by 1 (default) each time it is applied. Place it on the repeated items.
.list li {
counter-increment: step;
/* increments "step" by 1 for each li */
}counter() Function in content
Display the current counter value using counter(name) in the content property of a pseudo-element.
.list li::before {
content: counter(step);
display: inline-block;
/* shows 1, 2, 3... before each list item */
}Styled Step Counter
A complete numbered steps component without JavaScript:
.steps {
counter-reset: step-counter;
}
.step {
counter-increment: step-counter;
position: relative;
padding-left: 48px;
}
.step::before {
content: counter(step-counter);
position: absolute;
left: 0;
width: 36px;
height: 36px;
background: royalblue;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}Counter Initial Value
Set a custom starting number in counter-reset:
.list {
counter-reset: step 4; /* starts counting at 5 */
}Counter Styles
Use a second argument to counter() to specify a list style type:
li::before {
content: counter(step, upper-roman) ". ";
/* I. II. III. IV. */
}Nested Counters with counters()
counters(name, separator) (with an "s") creates nested numbering like "1.1", "1.2", "2.1":
ol { counter-reset: item; }
li::before {
content: counters(item, ".") ". ";
counter-increment: item;
}
/* 1. 1.1 1.2 2. 2.1 */Resetting on Nested Lists
Each nested ol inherits the counter scope. The counters() function automatically uses the full counter chain.
Section Numbering
Auto-number headings in long documents:
body { counter-reset: h2; }
h2 { counter-reset: h3; counter-increment: h2; }
h3 { counter-increment: h3; }
h2::before { content: counter(h2) ". "; }
h3::before { content: counter(h2) "." counter(h3) ". "; }Table of Contents with Counters
CSS counters were historically used for tables of contents and formatted documents. Today, this is often handled by JavaScript frameworks, but CSS counters remain a pure-CSS option.
Quick Check
Which property increments a CSS counter on each matching element?
Recap
CSS counters enable automatic numbering without JavaScript. Use counter-reset on the container, counter-increment on repeated items, and display the value with counter(name) in a pseudo-element's content. counters() handles nested numbering with separators.
Frequently asked questions
Is the “CSS Counters with ::before” lesson free?
Yes — the full text of “CSS Counters with ::before” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “CSS Counters with ::before”?
Create automatic numbering systems using CSS counters and the counter() function. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “CSS Counters with ::before” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.