CSS counter-increment Property

Syntax

counter-increment: none | id | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        counter-reset: my-counter;
    }

    p::before {
        counter-increment: my-counter;
        content: "Section " counter(my-counter) ". ";
    }
</style>
</head>
<body>

<p>HTML Tutorial</p>
<p>CSS Tutorial</p>
<p>JavaScript Tutorial</p>
<p>jQuery Tutorial</p>

</body>
</html>

Preview

Property Values

Value	Description
none	The default value. There will be no incrementing of counters.
id number	The id specifies which counter should be incremented. The value determines how much the counter will increase with each occurrence of the selector. The initial increment is one. Negative values are permitted. If id refers to a counter that has not been reset with counter-reset, the default initial value is 0.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
counter-increment	4.0	2.0	3.1	8.0	9.6

content

counter-reset

CSS counter-increment Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us