Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator

What is the CSS counter-increment property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The counter-increment property in CSSCascade Style Sheets is used to increase or decrease the value of the counter in CSS.


This property is used with the content and the counter-reset property.


Syntax


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

Property values

  • none: This is the default value, and by using this, we can not change the counter’s value.

  • id: It is used to specify which counter has to be incremented and also to specify that how much we want to increment. The default increment value is 1.

  • initial: This sets the value to its default value.

  • inherit: This inherits property from its parent value.

Code

The following is the basic HTMLHyperText Markup Language & CSS code to demonstrate the use of the counter-increment property:

Explanation

In this example, we can see that we have made the counter on Employee. So, when we add the details of any employee, it is automatically incremented by 1.

RELATED TAGS

css
community creator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring