Open In App

CSS counter-increment Property

Improve
Improve
Like Article
Like
Save
Share
Report

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;

Default Value:  none 

Property values:

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

counter-increment: none;

Example: 
 

html




<!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>                    


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: 
 

html




<!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>


Output: 
 

 

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

counter-increment: initial;

Example: 
 

html




<!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>


Output: 
 

 

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

counter-increment: inherit;

Example: 
 

html




<!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>


Output: 
 

 

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

  • Google Chrome 2.0 and above
  • Edge 12.0 and above
  • Internet Explore 8.0 and above
  • Firefox 1.0 and above
  • Opera 9.2 and above
  • Apple Safari 3.0 and above

 



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads