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

  3. mahantesh
    Permalink to comment#

    Event without script we can change number of li with counter-increament

    • I have edited your code a bit so it is actually working.

      You have to move counter-increment property from li:before to li itself. Also in counter-reset property you cannot use commas, just spaces to separate values.

  4. Permalink to comment#

    Is it possible to use it like this:

    div:nth-child(counter(item)) {
        z-index:counter(item);
    }
    

    I can’t get it working, would be nice if it would work that way also.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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