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:

    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.


    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Time limit is exhausted. Please reload the CAPTCHA.