CSS counter-increment Property

CSS counter-increment Property

This property controls CSS counter values.

Syntax-

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

The syntax shows the property accepts one or more counter names (counter-nameX), each one optionally followed by an integer.

The integer indicates by how much the counter is incremented or decremented for every occurrence of the element.

The default increment is 1.

Zero and negative integers are allowed.

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 -