PricingLoginStart free
CSS Academy · Lesson

CSS Counters with ::before

Create automatic numbering systems using CSS counters and the counter() function.

Lesson 3 of 413 steps

CSS Counters with ::before is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment increases the counter by 1 (default) each time it is applied. Place it on the repeated items.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter() Function in content

Display the current counter value using counter(name) in the content property of a pseudo-element.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Styled Step Counter

A complete numbered steps component without JavaScript:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

Counter Initial Value

Set a custom starting number in counter-reset:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Counter Styles

Use a second argument to counter() to specify a list style type:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Nested Counters with counters()

counters(name, separator) (with an "s") creates nested numbering like "1.1", "1.2", "2.1":

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

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:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</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?

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
40
Lessons
159
Start learning freeView the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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.

All lessons in this course

  1. ::before and ::after Content
  2. ::placeholder ::selection and ::marker
  3. CSS Counters with ::before
  4. Decorative Patterns with Pseudo-elements
← Back to CSS Academy