Counters in CSS

CSS Counters: In this tutorial, we are going to learn about the counters in CSS (Cascading Style Sheet) with examples.
Submitted by Anjali Singh, on November 29, 2019

CSS Counters

Counters in CSS can be defined as variables maintained by CSS and the values of those variables can be incremented by CSS rules to track the number of times they have been used.

Example Counters in CSS can be used to increment the number of paragraphs automatically.

CSS counter properties

Following are the counter properties,

counter-reset
counter-increment
content
counter() / counters() functions

Let's look at each property more closely,

1) counter-reset property

This property is used to create or reset a counter.

To use CSS counter property firstly it must be created with the counter-reset property and the first step is resetting the counter.

Syntax:

Element {
    counter-reset: section;
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            counter-reset: section;
        }
        
        h2::before {
            counter-increment: section;
            content: "Section " counter(section) ": ";
        }
    </style>
</head>

<body>
    <h1>Counters in CSS</h1>
    <h2>counter1</h2>
    <h2>counter2</h2>
    <h2>counter3</h2>
</body>

</html>

Output

In the above example, the number of times a h2 tag is used is 3.

2) counter-increment property

This property is used to increment the value of the counter.

Syntax:

Element {
    counter-increment: section;
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            counter-reset: heading;
        }
        
        h2::before {
            counter-increment: heading;
            content: "Section " counter(heading) ": ";
        }
    </style>
</head>

<body>
    <h1>Counters in CSS</h1>
    <h2>counter 1 increment</h2>
    <h2>counter 2 increment</h2>
    <h2>counter 3 increment</h2>
</body>

</html>

Output

In the above example, we are incrementing the content of the heading.

3) content property

This property is used to insert the generated content.

Syntax:

Element{
	content:counter(section);
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            counter-reset: heading;
        }
        
        h2::before {
            counter-increment: heading;
            content: "Section " counter(heading) ": ";
        }
    </style>
</head>

<body>
    <h1>Counters in CSS</h1>
    <h2>counter 1 increment</h2>
    <h2>counter 2 increment</h2>
    <h2>counter 3 increment</h2>

</body>

</html>

Output

In the above example, the "section" and ":" are the part of the content which are used before the h2 tag content.

4) counter() / counters() functions

The counter() function or the counters() function in content is used to display the content in a particular order. These two functions are basically used to add the value of a counter to the element.

Syntax:

Element {
    counter(section);
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            counter-reset: heading;
        }
        
        h2::before {
            counter-increment: heading;
            content: "Section " counter(heading) ": ";
        }
    </style>
</head>

<body>
    <h1>Counters in CSS</h1>
    <h2>counter 1 increment</h2>
    <h2>counter 2 increment</h2>
    <h2>counter 3 increment</h2>
</body>

</html>

Output

In the above example, the counter() function is used to display the heading content.