The counter-reset property allows for automatic numbering of elements. Like an ordered list (<ol>), but it works on any element. It is particularly useful in creating a table of contents or numbering headings for something like a thesis paper. The counters are applied via the content property. A simple example:

article {
  counter-reset: section;
section {
  counter-increment: section;
section h2:before {
  content: counter(section) '. ';

The counter-reset property is used to reset a CSS counter to a given value.

It is part of the CSS counter module which is part of the generated content, automatic numbering, and lists CSS2.1 specification, extended in Generated and Replaced Content Module CSS3 specification.


counter-reset: [<user-ident> <integer>?]+ | none


  • <user-ident> is the name of the counter you want to reset
  • <integer> is the value to reset the counter to
  • none disable the counter
body {
  counter-reset: my-awesome-counter 0;

Note: the default value for the integer is 0. If no integer is set after the counter name, it will be reseted to 0. Thus, this works as expected:

body {
  counter-reset: my-awesome-counter;

You can reset several counters at once with a space-separated list, each one with its specific value if you wish so.

body {
  counter-reset: my-awesome-counter 5 my-other-counter;

This will reset my-awesome-counter to 5 and my-other-counter to the default value: 0.

You can see this list as: counter1 value1 counter2 value2 counter3 value3 .... If a value is omitted, it's 0.


In the following demo, article resets section counter to its default value (0), which is then incremented at each section occurrence, then displayed in front of section headings.

Check out this Pen!

Related properties

More Information

Browser Support

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


  1. User Avatar
    Aaron Hall
    Permalink to comment#

    Very useful! Thanks!!!

  2. User Avatar
    Permalink to comment#

    Always learn a lot from CSS-Tricks.
    With counter-reset and this useful nth-child tip, I was able to make double digit ordered lists.

    With something along these lines…

    ol {
        counter-reset: li;
    ol > li::before {
        content: counter(li);
        counter-increment: li;
        margin-right: 10px;
        line-height: 0;
    ol > li:nth-child(-n+9)::before { /* 1 - 9 */
        content: "0" counter(li); /* becomes 01 - 09 */

    I get the output:

    01 one
    02 two
    03 three
    04 four
    05 five
    06 six
    07 seven
    08 eight
    09 nine
    10 ten

    PS: Chris, you need to fix the padding on your ordered lists (gets cut off starting with double digits):


    • User Avatar
      Permalink to comment#

      OK, the numbers are removed after the comment is posted. On my PS above, I meant typing ordered lists in Markdown on the comments. Cheers.

      1. one
      2. two
      10. ten
      11. eleven
    • User Avatar
      Permalink to comment#

      Numbering In Style

      list-style-type: decimal-leading-zero;


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.