CSS Counters | CSS for Beginners - Class 6 PDF Download

Automatic Numbering With Counters

• counter-reset - Creates or resets a counter
• counter-increment - Increments a counter value
• content - Inserts generated content
• counter() or counters() function - Adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.
The following example creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element:
Example

body {

  counter-reset: section;

}

h2::before {

  counter-increment: section;

  content: "Section " counter(section) ": ";

}

Nesting Counters

body {

  counter-reset: section;

}

h1 {

  counter-reset: subsection;

}

h1::before {

  counter-increment: section;

  content: "Section " counter(section) ". ";

}

h2::before {

  counter-increment: subsection;

  content: counter(section) "." counter(subsection) " ";

}

A counter can also be useful to make outlined lists because a new instance of a counter is automatically created in child elements. Here we use the counters() function to insert a string between different levels of nested counters:
Example

ol {

  counter-reset: section;

  list-style-type: none;

}

li::before {

  counter-increment: section;

  content: counters(section,".") " ";

}

CSS Counter Properties