CSS | counter-increment Property

The CSS counter-increment Property is used to increment/decrement value of a counter. A CSS counter is a variable that is used to track how many times a variable is used.

Syntax:

counter-increment: none | identifier | initial | inherit;

Property values:



  • none: This is the default value and by this no counters will be incremented.

    Syntax:

    counter-increment: none;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS counter-increment Property</title>
        <style>
          
            h1 {
                color: green;
            }
              
            body {
            }
              
            <!-- The h2::before selector inserts something
            before the content of each selected element -->
            h2::before {
              
                counter-increment: none;
            }
        </style>
    </head>
      
    <body>
      
        <h1>Welcome to GeeksforGeeks</h1>
        <h1>Courses: </h1>
        <h2>Fork Python</h2>
        <h2>Fork Java</h2>
        <h2>Fork CPP</h2>
        <h2>Sudo Gate</h2>
      
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • identifier: The identifier value is used to define which counter is to be incremented. This value also takes a number which defines how much the increment will take place. The default value of this increment value is 1 (if the selector has not been reset, then the default value will be 0). This value also takes the negative values as well.

    Syntax:

    counter-increment: identifier;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS counter-increment Property</title>
        <style>
            
            h1 {
                color: green;
            }
              
            body {
                
                <!-- Set "geek-counter" identifier to 0 --> 
                  counter-reset: geek-counter;
            }
              
            <!-- The h2::before selector inserts something
              before the content of each selected element --> 
              h2::before {
                
                <!-- Increment "geek-counter" by 1 --> 
                counter-increment: geek-counter;
                content: "Course " counter(geek-counter) ": ";
            }
        </style>
    </head>
      
    <body>
      
        <h1>Welcome to GeeksforGeeks</h1>
        <h1>Courses: </h1>
        <h2>Fork Python</h2>
        <h2>Fork Java</h2>
        <h2>Fork CPP</h2>
        <h2>Sudo Gate</h2>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • initial: This value sets the property to its default value.

    Syntax:

    counter-increment: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
        body {
                /* Set "my-geek-counter" to 1*/
                counter-reset: my-geek-counter 1;
            }
              
            h2::before {
                /* Sets the initial value 
                  which is 1 here for the counter */
                counter-increment: initial;
                content: "Section " counter(my-geek-counter) ". ";
            }
        }
        </style>
    </head>
      
    <body>
      
        <h1>Welcome to GeeksforGeeks</h1>
        <h1>Courses: </h1>
        <h2>Fork Python</h2>
        <h2>Fork Java</h2>
        <h2>Fork CPP</h2>
        <h2>Sudo Gate</h2>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • inherit: This value inherits this property from its parent element.

    Syntax:

    counter-increment: inherit;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
        body {
                /* Set "my-geek-counter" to 1*/
                counter-reset: my-geek-counter 1;
            }
              
            h2::before {
                /* Sets the initial value 
                which is 1 here for the counter */
                counter-increment: inherit;
                content: "Section " counter(my-geek-counter) ". ";
            }
        }
        </style>
    </head>
      
    <body>
      
        <h1>Welcome to GeeksforGeeks</h1>
        <h1>Courses: </h1>
        <h2>Fork Python</h2>
        <h2>Fork Java</h2>
        <h2>Fork CPP</h2>
        <h2>Sudo Gate</h2>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

Supported Browsers The browsers supported by counter-increment property are listed below:

  • Google Chrome 2.0
  • Internet Explore 8.0
  • Firefox 1.0
  • Opera 9.2
  • Apple Safari 3.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.