It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The Guide on Calculating and Nesting CSS Counters

Reading time 3 min
Published Oct 1, 2019
Updated Oct 2, 2019

TL;DR — CSS counters are variables that get their values incremented to track the number of times they were used across the document.

How to work with CSS counters

CSS counter is a type of a variable that modifies the look of the content according to where it is located on the page. CSS checks how may times a particular counter has been used by incrementing it.

There are three main properties you can use to work with counters – CSS content, CSS counter increment and CSS counter reset:

Property Description
content Can be used along with ::before and ::after pseudo-elements to insert generated content
counter-increment Increases the value of the CSS counter by one or more, allowing you to keep track of it
counter-reset Allows you to create or reset CSS counters

Counters in CSS numbered lists

We will be using two properties – counter-reset, and counter-increment – to calculate CSS counters. To display them, we will need to use content paired with two CSS counter-specific functions: counter() and counters().

You should start working on your CSS variables by creating counter-reset. Only then you can define counter-increment and content.

The example below shows how you can create a counter using CSS, then increment the value of the counter for each <h1> element. We also add "Chapter " counter(chapter) " which shows the chapter name with a relevant number before each heading:

Example
body {
    counter-reset: counter;
}

h1::before {
    counter-increment: chapter;
    content: "Chapter " counter(chapter) ": ";
}

Nesting counter lists

Many modern websites with a lot of headings and subheadings have tables of contents. You can create one using counters as well.

In the example below, you can see CSS showing numbers for both chapters and subchapters:

Example
body {
    counter-reset: chapter;
}

h1 {
    counter-reset: subchapter;
}

h1::before {
    counter-increment: chapter;
    content: "Chapter " counter(chapter) ". ";
}

h2::before {
    counter-increment: subchapter;
    content: counter(chapter) "." counter(subchapter) " ";
}

The chapter counter increments and displays the current chapter counter value in each individual first level heading. Meanwhile, the sub-chapter counter increments for each second level heading by the current chapter counter value and the current sub-chapter counter value with a period (.) between them.

Outlined lists

Counters are also useful for creating outlined lists. In HTML, you cannot continue incrementing on a previous level of a list once you've gone into a further level. However, it's possible with CSS counters.

We are going to use the counters() function to insert a string between different levels of nested counters:

Example
ol {
    counter-reset: list;
    list-style-type: none;
}  	

li::before {
    counter-increment: list;
    content: counters(list, ".") " ";
}

CSS counter: useful tips

  • When simply listing something, you can use the simple HTML ordered list as well. It also conveys the semantic meaning of a list.
  • By adding a second value to content, you can modify the CSS counter style. Define the type of numbering (decimal, decimal-leading-zero, upper-roman, lower-roman, upper-latin, lower-latin, upper-alpha, lower-alpha, lower-greek, armenian or georgian) or a different marker (disc, circle, or square).

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
8+
Browser image
Opera
All
Browser image
Safari
3+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
1+