HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector
The counter-increment
property increases or decreases the value of one or
more CSS counters.
The counter-increment
property is usually used together with the
counter-reset property and the
content property.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS2 |
JavaScript syntax: | object.style.counterIncrement = "subsection"; Try it |
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Numbering sections and sub-sections with "Section 1:", "1.1", "1.2", etc.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
CSS reference: ::before pseudo element
CSS reference: ::after pseudo element
CSS reference: content property
CSS reference: counter-reset property
CSS functions: counter() function
HTML DOM reference: counterIncrement property