CSS Counters

Imagine being supervisor at a busy post office. Each visitor grabs a numbered paper ticket when they enter: ticket 1, ticket 2, ticket 3, and so on. You do not write these numbers on the tickets manually. Instead, you have a ticketing machine that increases the number automatically every time someone pulls a ticket. CSS counters are those automated ticketing machines. They allow your stylesheets to count elements (like headers, chapters, or steps) automatically, displaying the sequence numbers on your page without requiring you to type them manually.

In this page:

Initializing Counters with counter-reset
Incrementing Counters with counter-increment
Rendering Counters with Content
Handling Nested Counters
Customizing Counter Styles

Syntax

css

body {
  counter-reset: counter-name;
}
selector::before {
  counter-increment: counter-name;
  content: counter(counter-name);
}

Initializing Counters with counter-reset

To start a CSS counter, you must initialize its value using the counter-reset property on a parent element, which sets your counter variable's starting value (zero by default). counter-set works similarly to counter-reset but does not create a new counter if one does not already exist in scope -- it only sets the value of an existing counter, making it useful for resetting a counter's value partway through a list without restarting it from a parent.

Note:

Declare your counter-reset properties on the parent container of the list you want to count.
Accepted values:
counter-reset — name and optional start value, e.g. section 0
counter-set — like counter-reset but sets an existing counter's value
none — no counter change (initial value)
integer — may be negative
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Warning: If you do not declare a counter-reset on a parent element, the counter will fail to initialize.

Example: Initializing Counters with counter-reset

css

<style>
ol {
  counter-reset: item;
}
</style>
<ol><li>First</li></ol>

Incrementing Counters with counter-increment

The counter-increment property tells the browser to increase the value of your custom counter variable. Every time the browser encounters the targeted element, it ticks the counter up (by 1 by default).

Note:

You can specify a custom increment value (like counter-increment: chapter 2) to count in steps.
Accepted values:
counter-increment — name and optional step, e.g. section 1
counter-reset — name and optional start value, e.g. section 0
none — no counter change (initial value)
integer — may be negative
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Warning: Make sure your counter-increment property is targeted correctly, or your count values will fail to tick up.

Example: Incrementing Counters with counter-increment

css

<style>
ol {
  counter-reset: item;
}
li {
  counter-increment: item;
}
</style>
<ol>
  <li>Ticks up by 1 each time</li>
  <li>Ticks up by 1 each time</li>
</ol>

Rendering Counters with Content

To display your counter value on your webpage, you use the counter() function inside the content property of a CSS pseudo-element (::before or ::after), allowing the browser to render the calculated numbers automatically.

Note: Combine counter() with string prefixes inside your content property (like content: "Chapter " counter(chapter) ": ";) to format your labels cleanly.

Warning: You must use pseudo-elements (::before or ::after) to render counter values on your page.

Example: Rendering Counters with Content

css

<style>
ol {
  counter-reset: item;
  list-style: none;
}
li {
  counter-increment: item;
}
li::before {
  content: "Chapter " counter(item) ": ";
}
</style>
<ol>
  <li>Introduction</li>
  <li>Basics</li>
</ol>

Handling Nested Counters

You can nest counters to handle complex, multi-level outlines (like section '1.1' or '1.1.1'). By using the counters() function (with an s on the end), you can instruct the browser to render nested counters separated by dots automatically.

Note: Use nested counters to style complex multi-level manuals or documentation index lists.

Warning: Nested counters require precise list indentation styles to render alignments cleanly.

Example: Handling Nested Counters

css

<style>
ol {
  counter-reset: section;
  list-style: none;
}
li {
  counter-increment: section;
}
li::before {
  content: counters(section, ".") " ";
}
</style>
<ol>
  <li>Chapter
    <ol><li>Nested section</li></ol>
  </li>
</ol>

Customizing Counter Styles

You can customize how your counter numbers display by passing a style parameter (like upper-roman or lower-alpha) to your counter() function, allowing you to render Roman numerals or alphabetical sequences easily.

Note:

Use lowercase letters for sub-steps to make your lists easy to read and follow.
Accepted values:
decimal — 1, 2, 3 (initial value)
lower-alpha / upper-alpha — a, b, c or A, B, C
lower-roman / upper-roman — i, ii, iii or I, II, III
disc / circle / square — bullets
none — no marker

Warning: Verify browser support if you use rare, non-standard numbering styles.

Example: Customizing Counter Styles

css

<style>
ol {
  counter-reset: item;
  list-style: none;
}
li {
  counter-increment: item;
}
li::before {
  content: counter(item, upper-roman) ". ";
}
</style>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Forms Next Lesson → CSS Specificity

CSS Counters

Initializing Counters with counter-reset

Incrementing Counters with counter-increment

Rendering Counters with Content

Handling Nested Counters

Customizing Counter Styles

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code