What are Counters in CSS?

Web Development
,
#1

CSS counters let you adjust the appearance of content based on its location in a document. It is important to represent data in an organized way so that the user can easily understand the structure of the website or content.

For example, you can use counters to automatically number the headings in a webpage or to change the numbering on ordered lists. Counters are, in essence, variables maintained by CSS whose values may be incremented or decremented by CSS rules that track how many times they’re used.

CSS counters properties: CSS counters contains the following properties:

  • counter-reset: It is used to reset a counter.
  • counter-increment: It basically increments a counter value.
  • content: It is used to generate content.
  • counter() or counters() function: The value of a counter can be displayed using either the counter() or counters() function in a content property. These two functions are basically used to add the value of a counter to the element.

Initialization of the CSS Counter: To use the CSS counter property firstly it must be created with the counter-reset property and the first step is resetting the counter. The counter by default initialized to a value 0(zero) with the counter-reset property.

Syntax:

counter-reset: myCounter;