Home HTML CSS JavaScript jQuery ReactJS NodeJS About us Blogs Faqs

CSS Counters

CSS counters are essentially variables that can be used for numbering, and the values of CSS counters can be incremented by CSS rules. CSS counters, for example, can be used to automatically increment the numbering of headings. The <ol> tag in HTML is used to give ordered numbers to list items, but CSS contains counter to give order elements in other ways.

CSS counters properties include: CSS counters include the following attributes:

  • counter-reset: This function resets a counter.
  • counter-increment: It basically increases the value of a counter.
  • content: It is employed in the creation of content.
  • counter() or counters() function: The value of a counter can be displayed in a content property using either the counter() or counters() function. These two functions essentially add the value of a counter to the element.

1. counter-reset:

To use the CSS counter property, it must first be created with the counter-reset property, with the first step being to reset the counter. With the counter-reset property, the my counter is initially set to 0 (zero).

2. counter-increment:

CSS counter-increment property is used to increment the counter.

3. content 

In a content, the counter() or counters() function is used to display the content in a specific order.

Example

Preview

Nested CSS counters:

A nested counter is a counter within a counter. Headings and subheadings are created using nested counters. This example demonstrates how to use CSS counters with nested tags. Different counters are used for various types of tags.

Example

Preview

FAQs

CSS counters can be useful for creating automatically numbered headings, sections, and figures in a document. They can also be used to create custom bullet points for lists, or to create automatically numbered footnotes and endnotes.

To reset a CSS counter to its initial value, you can use the counter-reset property again, with the same name as the original counter. For example, to reset a counter named "myCounter" to zero, you would use the following CSS rule:

counter-reset: myCounter 0;

Yes, you can style the appearance of a CSS counter using CSS properties such as font-family, font-size, color, and list-style-type. You can also use CSS pseudo-elements, such as ::before and ::after, to insert custom text or symbols before or after the counter value.