counter-increment

Definition

The CSS counter-increment property is used to increment the value of a counter, which is used in conjunction with the counter() function to display a running list of items with custom symbols or styles.

Examples

In this example, a counter named section is reset for the entire body element using counter-reset: section;. The h1 element's :before pseudo-element increments the section counter using counter-increment: section;, and then the content property displays the counter value using content: "Section " counter(section) ": ";:

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

In this example, an ordered list ol has a counter named li reset using counter-reset: li;. Each list item li increments the li counter using counter-increment: li;, and the :before pseudo-element of each list item displays the counter value using content: counter(li) ".";:

ol {
  counter-reset: li;
}
li {
  counter-increment: li;
}
li:before {
  content: counter(li) ".";
}

In this example, a counter named custom-symbol is reset for the entire body element using counter-reset: custom-symbol;. The h2 element's :before pseudo-element increments the custom-symbol counter using counter-increment: custom-symbol;, and then the content property displays the custom symbol using content: "➤";:

body {
  counter-reset: custom-symbol;
}
h2:before {
  counter-increment: custom-symbol;
  content: "➤";
}

Values

Best Practices

• Use the counter-reset property in conjunction with counter-increment to create a running list of items with custom symbols or styles.
• Use the counter() function to display the value of a counter in the content property.
• Use unique names for each counter to avoid conflicts.

Browser Compatibility