CSS counter-increment Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

'counter-increment' property counts each paragraph used for this demo.

This is paragraph

CSS counter-increment Property

CSS counter-increment property increases or decreases the value of a CSS counter by a given value.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ /* Set "myCounter" to 0 */ counter-reset: myCounter; } p::before{ counter-increment: myCounter; content: "Paragraph " counter(myCounter) ": "; font-weight: bold; font-size: 17px; } </style> </head> <body> <h1>CSS counter-increment Property</h1> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> </body> </html>

Run

Syntax

Using CSS

element{ counter-increment: myCounter; }

Using Javascript

object.style.counter-increment="myCounter";

Animatable

No, counter-increment property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS counter-increment property is none.

Property Value

The following table provides a list of values for CSS counter-increment property.

Value	Explanation
none	Specifies that no counters will be incremented.
custom id	Specifies the name of the counter to increment.

Using JavaScript

In the following example, we will demonstrate how to change the CSS counter-increment property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p { counter-increment: myCounter; } p::before{ content: "Paragraph " counter(myCounter) ": "; font-weight: bold; font-size: 17px; } </style> </head> <body> <h1>CSS counter-increment Property</h1> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[1]; function myFunction(){ x.style.counterIncrement = "myNewCounter"; } </script> </body> </html>

Run