Skip to content
Related Articles

Related Articles

CSS | counter-increment Property
  • Last Updated : 08 Aug, 2019

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
Recommended Articles
Page :