CSS counter-reset Property

CSS's counter-reset property is used to create or reset an element's CSS counter. This property works in tandem with the counter-increment and content properties.

Syntax

counter-reset: none | name number | 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 reset of counters.
id number	The id specifies which counter should be reset. The number specifies the value at which the counter is reset after each occurrence of the selector. The default value for a number 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-reset	4.0	2.0	3.1	8.0	9.6

counter-increment

cursor

CSS counter-reset Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us