counter-increment

Avatar of Sara Cope
Sara Cope on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.

<body>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</body>
body {
  counter-reset: my-awesome-counter;
}
section {
  counter-increment: my-awesome-counter;
}
section:before {
  content: counter(my-awesome-counter);
}

Each <section> will respectively start with “1”, “2”, “3”, or “4”.

You can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:

section:before {
  content: counter(my-awesome-counter, upper-roman);
}

Demo

On CodePen:

More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
2+ 3.1+ Any 9.2+ 8+ TBD TBD