CSS counter-reset Property

CSS counter-reset Property

This property contains a list of one or more counter names to be cleared or set to a particular value

Syntax -

counter-reset: counter-name1 [integer] ... counter-nameN [integer] | none | inherit

The syntax shows the property accepts one or more names of counters, each one optionally followed by an integer.

The integer indicates what the counter value should be set to; when a value is not specified, the counter is set to 0.

Now we will see example -

Example -

<!DOCTYPE html>
<html>
<head>
<style>
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

p::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment: my-sec-counter 1;
content: "Starts here - " counter(my-sec-counter) ". ";
background-color: yellow;
color: red;
font-weight: bold;

}
</style>
</head>
<body>

This is a sample pera Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum ducimus nostrum nesciunt, ad deleniti doloribus nemo voluptates nisi molestiae, autem ex, tenetur corporis! Sequi ad optio voluptatibus corrupti minus dicta id sed rerum sit?
<hr> 
This is a sample pera Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum ducimus nostrum nesciunt, ad deleniti doloribus nemo voluptates nisi molestiae, autem ex, tenetur corporis! Sequi ad optio voluptatibus corrupti minus dicta id sed rerum sit?<hr> 

This is a sample pera Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum ducimus nostrum nesciunt, ad deleniti doloribus nemo voluptates nisi molestiae, autem ex, tenetur corporis! Sequi ad optio voluptatibus corrupti minus dicta id sed rerum sit?<hr> 

This is a sample pera Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum ducimus nostrum nesciunt, ad deleniti doloribus nemo voluptates nisi molestiae, autem ex, tenetur corporis! Sequi ad optio voluptatibus corrupti minus dicta id sed rerum sit?<hr> 

</body>
</html>

Output -