The Guide on Calculating and Nesting CSS Counters

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:

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:

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:

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:

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

Mobile browser support