CSS Counters

CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used).

To work with CSS counters we will use the following properties:

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

Example 1: Numbering Sections

In this example, we create a counter for the page (in the body selector), then increment the counter for each <h2> element and add "Section <value>:" to the beginning of each <h2> element.

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Example 2: Nesting Counters

The following example creates a counter for the page (section) and a counter for each <h2> (subsection). The "section" counter counts the <h2> elements with "Section <value>", and the "subsection" counter counts the <h3> elements with "<section_value>.<subsection_value>".

HTML

HTML Introduction

HTML Editors

CSS

CSS Introduction

CSS Syntax

Example

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}