CSS Ordered List <ol> Numbering Examples

Continuing an Ordered List

If you were to markup a table of contents that has multiple ordered list <ol> elements, below is a bit of CSS that could style those lists so that they continue their numbering from the previous list. The numbers themselves can’t be laid out like a tradition ordered list so they are floated to the left and every line-item <li> element clears left.

Basically, ordered lists get the class “chapters” and then a secondary class which describes which half of the chapters they are numbering. The “start” class sets the “chapters” counter. The “continue” class manually resets a counter the corresponds with the last number from the previous list.

CSS:

  ol.chapters {
    list-style: none;
    margin-left: 0;
  }
  
  ol.chapters > li:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    font-weight: bold;
    float: left;
    width: 40px;
  }
  
  ol.chapters li {
    clear: left;
  }
  
  ol.start {
    counter-reset: chapter;
  }
  
  ol.continue {
    counter-reset: chapter 11;
  }

Example:

Reversing an Ordered List

Below is an example of how you could reverse the ordering of an ordered list using CSS. In this example we reset the increment counter to one more than the number of elements in the list. Then when we increment a list-item we increment by negative 1. The result is a list that counts backward.

In this example, again we can’t use the list-style numbering for our elements so I used absolute positioning on the :before pseudo-class to get the desired effect.

CSS:

  ol.reverse {
    list-style: none;
    counter-reset: reverse 11;
  }

  ol.reverse > li:before {
    content: counter(reverse) '.';
    display: block;
    left: -30px;
    position: absolute;
    text-align: right;
    width: 20px;
  }

  ol.reverse li {
    counter-increment: reverse -1;
    position: relative;
  }

Example:

Back to The Proper Way to Number an Ordered List <ol> blog post.
Or find out more about the author Timmy Christensen.