How to create numbering using counter-increment property in CSS ?

Last Updated : 24 Apr, 2023

This article will give you an idea about how to use counter-reset and counter-increment properties in CSS. We can use counter-reset and counter-increment properties to set count to the HTML elements in the webpage.

Need for using counter-increment Property:

This property can be used to set to increment/decrement value of a counter. For organizing the data properly, it is necessary to format it to make a webpage attractive. We can set count to the HTML elements in several ways. The simplest way is that we can set numbers manually, which will be not a good practice. We can use the HTML list that can be either an ordered list or an unordered list. Although, there are a few drawbacks of using the list over the CSS counter properties, which are given below:

We can use the CSS counter to set counts to the complex list.
Users can add a custom design to the counts, whereas numbered list doesn't allow for customization.
Users can set the starting point of the counter.
The most useful feature is that we can set the incremental value using CSS counter, whereas numbered list only increases the value by 1.

There are several ways of numbering with CSS counters.

Syntax:

Initialize span-count variable.

counter-reset: Span-count;

Increase span-count variable.

counter-increment: Span-count;

Adding count to content.

content: counter(Span-count);

Attributes: The following properties are contained by the CSS counter:

Counter-reset: To Initialize the counter variable. The default value of the counter variable is 0. Also, we can set its value manually. It is required to create the counter-reset variable before we use counter-increment in the webpage.
Counter-increment: To increment counter variable. The default increment value is 1. We can also set it up manually.
Counter (counter_variable): This function takes the counter variable as an argument. It adds the count before or after to the HTML element.
Counters(counter_variable): It is the same as the counter() function. We can use it to implement the nested counters.
Content: To set count to the content of the HTML element.

Example: This is a simple example that demonstrates to use of CSS counters.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS counters</title>
    <style>
        /* Initializing the counter variable */
        body {
            counter-reset: Span-count;
        }

        /* Incrementing the value for counter variable */
        span {
            counter-increment: Span-count;
            color: green;
        }

        /* Adding counter to the content */
        span:before {
            content: counter(Span-count) ". ";
        }
    </style>
</head>

<body>
    <span>GeeksforGeeks</span> <br>
    <span>GFG</span>
</body>

</html>

Output:

Changing starting and incremental value of CSS counter: The default starting and incremental values for the CSS counter are 0 and 1 respectively. We can change the default starting value by setting up the value of the counter-reset variable. No matter what value we set for the counter-reset variable, it will begin counting from the value which is the sum of the initial value and incremental value. For example, If we initialize the counter-reset variable with 1 and counter-increment to 2, it will start the numbering from 3.

Syntax:

counter-reset: Span-count -1;

Syntax:

To change the incremental value of the CSS counter, we need to set the value of the counter-increment properties.

counter-increment: Span-count 2;

Example: This code demonstrates to change the default value of the counter-reset and counter-increment variable.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS counters</title>
    <style>
    
    /* Initialize the counter-reset variable with -2*/
    body {
        counter-reset: Span-count -2;
    }
    
    /* Changing incremental value to 2 */
    span {
        counter-increment: Span-count 2;
        color: green;
    }
    
    span:before {
        content: counter(Span-count) "- ";
    }
    </style>
</head>

<body> 
    <span>GeeksforGeeks</span><br> 
    <span>GFG</span> 
</body>

</html>

Output:

Incrementing the counter by 2 using CSS Counter

Set count format: Another interesting feature of the CSS counter is that it provides different count formats. The default format for the counters is the decimal format. We can change the default format to lower-latin, lower-greek, and lower-roman.

Syntax: We need to change only the content property as shown below, to change the format of the counts.

content: counter(Span-count, values);

Attributes values:

decimal: Represent the numeric values (e.g., 1,2,3,..)
lower-latin: To set alphabet as a count.
lower-greek: To set greek symbols as a count.
lower-roman: To set roman numbers as a count.

Example: This example demonstrates to change the format of the counts of the CSS counter.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS counters</title>
    <style>
      
    /* Initialize the counter variable */
    body {
        counter-reset: Span-count;
    }
   
    /* Increment the value for counter variable */
    span {
        counter-increment: Span-count;
        color: green;
    }
      
    /* Adding counter to the content 
    changing count format to lower-roman*/
    span:before {
        content: counter(Span-count, lower-roman) "- ";
    }
    </style>
</head>

<body> 
    <span>GeeksforGeeks</span><br> 
    <span>GFG</span> 
</body>

</html>

Output:

Setting the counter format in a lower roman

Nested counters: The counter within a counter is known as a nested counter. Nested counters are used to create headings and subheadings. Using CSS nested counters makes it easy instead of complex numbered lists. While numbering nested data, we need to add counts like 1.1, 1.2, 1.1.2, etc. We can accomplish the same thing by using CSS counters. Here, we will know the use of the counters() function.

Example: This example demonstrates nested counts using CSS counter. When a new div will start, the counter-reset variable recreates itself and reinitialize with the starting value.