Reverse Ordered Lists with CSS

The other minute I’ve read an interesting article on the new HTML5 reversed attribute on ordered lists, that, who would have thought, reverses the counting. The article proposed a JavaScript polyfill.

However, I thought, that this should be possible with CSS counters alone, and lo, it works:

<ol style="counter-reset: c 6">
  <li>Hello</li>
  <li>World</li>
  <li>Foo</li>
  <li>Bar</li>
  <li>String</li>
</ol>

and this CSS snippet:

ol {
  list-style: none;
}
li {
  counter-increment: c -1;
}
li:before {
  content: counter(c) ". ";
}

É voila, the reverse ordered list is ready. And it uses only minimal extra markup in the form of a style attribute.

If you want to see it in action, I’ve put the example on JSFiddle.