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

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.

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.

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.

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>

Common Mistakes

Forgetting to initialize your counter values on a parent element using counter-reset.
Attempting to display counter values inside elements directly without using the required ::before or ::after pseudo-elements.
Using the simple counter() function on nested lists when counters() would be required to display sub-level numbering.

Chapter Summary

CSS counters allow stylesheets to count page elements automatically and display the sequence numbers cleanly.
Initialize your counter on a parent element using counter-reset, and tick the value up using counter-increment on the child elements.
Display your counter values using counter() or counters() functions inside the content property of ::before or ::after pseudo-elements.

Browser Support

Standard CSS counters and nested list count functions are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Forms Next Lesson → CSS Specificity