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 {
}
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 {
counter-reset: geek-counter;
}
h2::before {
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Jun, 2023
Like Article
Save Article