CSS | counter-increment Property
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
.png)
