Hacer una lista ordenada (ol) cuenta regresiva o backwards

Para crear una lista podemos utilizar las etiquetas ul u ol, esta última ordena los datos y podemos mostrar con CSS diversos tipos de numeración con list-style-type

Ahora bien para convertir esto:

1. Uno
2. Dos
3. Tres

En:

3. Uno
2. Dos
1. Tres

Tenemos dos opciones, una con CSS y otra con Javascript.

Con CSS

Podemos invertir el orden de la lista en horizontal, simplemente flotando li a la derecha:

ol li {float: right;}

1. Uno
2. Dos
3. Tres

Pero lo que nosotros queremos es mantener el orden pero cambiar la numeración. Con este método también lo conseguimos aunque no es compatible con todos los navegadores:

ol {
  list-style: none;
  counter-reset: c 4; /* No. de elementos de la lista +1  */
}
ol > li::before {
  content: counter(c) ".  ";
  counter-increment: c -1;
}

Con Javascript

Primero ocultamos la numeración:

list-style-type: none;

Luego invertimos el orden y volvemos a mostrar la numeración con este código javascript:

<script type="text/javascript">
    <!--
      var ol = document.getElementById("cuenta_atras");
      var lis = ol.getElementsByTagName("li");
      for (var i = 1; i <= lis.length; i++)
        lis[lis.length-i].value = i;
      ol.style.listStyleType = "decimal";
    //-->
  </script>

Donde («cuenta_atras») será el id de nuestra lista.

<ol id="cuenta_atras">
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ol>

Si lo vas a utilizar en varias listas, utiliza clases en vez de ID.

En mi página de archivos puedes ver un ejemplo, donde todos los artí­culos aparecen en una lista ordenada con la numeración backwards o regresiva.

Fuentes:

+ Webdeveloper.com

+ SitePoint