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:

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

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

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

<!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
Internet Explore 8.0
Firefox 1.0
Opera 9.2
Apple Safari 3.0

My Personal Notes

Related Articles