CSS Counter

    In CSS we have the concept of counters which are the variables whose value keep increasing with some set of CSS rules. In this tutorial, we will be learning how can we use CSS counter to number specific content on a web page.

    Numbering using Counter

    The counter represents a numeric variable which value can be incremented by some rules, and the counter helps in tracking how many times a specific element is used on the web wage. There are 4 properties we need to work with the Counter

    counter-reset If there is no counter variable then create a variable else reset the old one.
    counter-increment Increase the value of Counter
    content Insert textual content using CSS
    counter() or counters() Insert the value of counter variable in the element.

    How to work with the counter?

    The first thing we need to work with counter is counter-reset property. It creates a variable which can be inserted in the element with each increment value of the counter.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                  /*It will create or reset the counter variable para for complete page or body*/
                  body {
                     counter-reset: para;
                        }
    
                  p::before {
                       /*increase the para variable value by 1*/
                       counter-increment: para;
      
                       /*Insert the para value before the paragraph*/
                       content: counter(para) ": ";
                            }
             </style>
        </head>
        <body>
            <p> This is the First Paragraph</p>
            <p> This is the Second Paragraph </p>
            <p> This is the third Paragraph</p>
        </body>
    </html>

    Preview

    1: This is the First Paragraph

    2: This is the Second Paragraph

    3: This is the third Paragraph

    Behind the Code

    CSS In the above example first, we create a counter variable para using the counter-reset:para property and value. Here the value para is arbitrary, you can use any variable name. In the p::before styling we increase the value of para variable by every <p> element by using the counter-increment: para; statement, and at last we insert the para variable value for each paragraph using the content property and counter(para) value.

    Nested Counters

    In the above example, we created a counter for paragraph elements, but it represents all the paragraphs present inside the <body> element. What If we want two different counter one for those paragraphs which are the direct child of <body> and another for those which are the child of a <div> element, for this case, we can use a nested counter. let’s see how can we create two different counters for <p> elements using the nested counter.

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                
                /*It will create or reset the counter variable body_para for complete page or body*/
                body {
                  counter-reset: body_para;
                      }
        
                /*It will create or reset the counter variable div_para for <div> element*/
                div{
                     counter-reset: div_para
    
                   }
               
               div p::before {
                     /*increase the div_para variable value by 1*/
                     counter-increment: div_para;
     
                     /*Insert the div_para value before the paragraph*/
                      content: counter(div_para) ": ";
                              }
               p::before {
                       /*increase the body para variable value by 1*/
                       counter-increment: body_para;
                 
                       /*Insert the body para value before the paragraph*/
                       content: counter(body_para) ": ";
                          }
            </style>
        </head>
        <body>  
            <p> Body First Paragraph</p>
            <p> Body Second Paragraph </p>
            <div>
                 <p>Div First Paragraph</p>
                 <p> Div Second paragraph</p>
            /div>
         </body>
    </html>

    Preview

    1: Body First Paragraph 2: Body Second Paragraph

    1: Div First Paragraph 2: Div Second paragraph

    Summary

    • Counters are the variable in CSS which numeric value can be incremented using counter-increment property.
    • Counter helps in keep tracking how many times an element is used in a web page.
    • Using the nested counter, we can also track how many times an element is used inside another element.
    • Using the content property we can insert new content before and after an element using the ::before and ::after paseudo-elements.