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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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”

    1
    2
    3
    4
    5
    6
    7
    <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

    Comparte para ver el código usado.