Reverse CSS Counters

Using CSS counters (pseudo-element) — both forward and backward

HTML

<ol class="foo">
    <li class="foo-item">
        <div class="thang">This is the first item, element, whatever...</div>
    </li>
    <li class="foo-item">
        <div class="thang">This is the second item, element, whatever...</div>
    </li>
    <li class="foo-item">
        <div class="thang">This is the third item, element, whatever...</div>
    </li>
    <li class="foo-item">
        <div class="thang">This is the fourth item, element, whatever...</div>
    </li>
</ol>
<!-- Using JS (and the .reversed class), we'll put the "count + 1" into inline CSS to start the counter -->
<ol class="foo reversed" style="counter-reset:thang 5">
    <li class="foo-item">
        <div class="thang">This is the first item, element, whatever...</div>
    </li>
    <li class="foo-item">
        <div class="thang">This is the second item, element, whatever...</div>
    </li>
    <li class="foo-item">
        <div class="thang">This is the third item, element, whatever...</div>
    </li>
    <li class="foo-item">
        <div class="thang">This is the fourth item, element, whatever...</div>
    </li>
</ol>

CSS

.foo {
    counter-reset: thang;
    width: 400px;
    font: 12px/18px Verdana, Tahoma, sans-serif;
    margin-bottom: 25px;
}
.foo-item { padding: 5px; }
.foo-item:before {
     counter-increment: thang;
     content: counter(thang);
     margin: 5px -5px 0 5px;
     padding: 1px 5px 0;
     float: right;
     color: white;
     background-color: #369;
}
.reversed .foo-item:before {
     counter-increment: thang;
 }