CSS y HTML: Crear listas con numeración decreciente

Las listas ordenadas o tambien llamadas ordered list (

) nos generan listas ordenadas, empezando desde el 1. Ejemplo:

1. Primero
2. Segundo
3. Tercero

Pero seguro que muchos alguna vez han querido tener una lista con la numeracion invertida, algo así:

5. Item 1
4. Item 2
3. Item 3
2. Item 4
1. Item 5

Para lograr esto lo haremos de dos maneras:

Usando CSS

Para ello basta con el siguiente código:

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

Si te fijas en el «ol» pusimos «counter-reset: c 10» eso nos indica que empezara desde el 10, la letra «c» es el nombre del contador, se puede poner al gusto de uno.

En el «li» «counter-increment: c -1» con eso decrecerá en 1 por cada «li».

Y en el «li:before» content: counter(c) «. » con esto pondremos el valor correspondiente.

Aquí te dejo algunos ejemplos adicionales:

Usando HTML

Para ello nos valdremos del atributo «reversed»

<ol reversed="reversed">
 	<li>Cinco</li>
 	<li>Cuatro</li>
 	<li>Tres</li>
 	<li>Dos</li>
 	<li>Uno</li>
</ol>

Con lo cual obtendremos:

1. Cinco
2. Cuatro
3. Tres
4. Dos
5. Uno