Grow your CSS skills. Land your dream job.

counter-increment

Last updated on:

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

Comments

  1. The guy drove home without paying for the skirt steak! haha

  2. arnold

    hmm it looks like Android and iOS has a good support too.

    caniuse.com

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".