Numeración de listas inversa

Numeración decreciente en listas ordenadas

by kseso

HTML

<ol class="inverso" style="counter-reset: reverso 6">
    <li>Hola</li>
    <li>Mundo</li>
    <li>Desde</li>
    <li>El blog</li>
    <li>KsesoCss</li>
</ol>

<ol class="inverso" style="counter-reset: reverso 5">
    <li>Hola</li>
    <li>Mundo</li>
    <li>Desde</li>
    <li>KsesoCss</li>
</ol>

<ol class="inverso centena" style="counter-reset: reverso 100">
    <li>Hola</li>
    <li>Mundo</li>
    <li>Desde</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>KsesoCss</li>
</ol>

CSS

ol.inverso {
  counter-reset: c 6;
  list-style: none;
  margin: 1em 5em;
  padding: 10px;
  border: 1px solid #444;
}
ol.inverso > li {
  counter-increment: reverso -1;
}
ol.inverso > li:before {
  content: counter(reverso) ". ";
  color: red;
}

ol.inverso.centena > li {
  counter-increment: reverso -10;
}