CSS | counter-increment Property - GeeksforGeeks

24 Aug, 2021
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
Internet Explore 8.0
Firefox 1.0
Opera 9.2
Apple Safari 3.0
 
ManasChhabra2
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript