CSS Counters

CSS counters are similar to the variables that are used to modify the look of the content according to where it is located on the page.

These CSS counters are maintained by CSS whose values can be incremented by CSS rules.

Numbering CSS Counters Properties

• counter-reset: The counter-reset is used to reset a counter.
• counter-increment: The counter-increment is used to incement the counter value.
• content: Thecontent is used to insert generated content.
• counter() OR counters() function: It is used to add the value of a counter to an element.

CSS Counter Properties Example

body {
     counter-reset: section;
  }
h4:before {
     counter-increment: section;
     content: "section" counter(section) ":";
  }

Output

NOTE: IE8 supports these properties only if a !DOCTYPE is specified.

Nesting Counters

The CSS nesting counter means that counters within the counter (means that headings and subheadings); for example, for more understanding you can see the example which one mentioned below:

Example of Nesting Counter

body {
     counter-reset: section;
  }
h3 {
     counter-reset: subsection;
  }
h3:before {
     counter-increment: section;
     content: "Section" counter(section) ". ";
  }
h4:before {
     counter-increment: subsection;
     content: counter(section) "." counter(subsection) " ";
  }

Output

Nesting Counter Example Explanation

In an upper example, we used <h3> as heading and <h4> as a subheading of <h3>.

CSS Counter Properties

• content: The content property is used with the ::before and ::after pseudo-elements, to insert generated content.
• counter-increment: The counter-increment property is used to increments one or more counters values.
• counter-reset: The counter-reset property is used to create OR reset one OR more counters.

Browser Support