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;
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
>
chevron_rightfilter_noneOutput:
- 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
>
chevron_rightfilter_noneOutput:
- 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
>
chevron_rightfilter_noneOutput:
- 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
>
chevron_rightfilter_noneOutput:
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