CSS Counter: Creando Listas Numeradas con Elegancia

por
Tiempo de lectura: < 1 minuto

Buenos dias, hoy os muestro un breve ejemplo de como sería: 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Lista Numerada</title>
</head>
<body>

  <ul class="numbered-list">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
  </ul>

</body>
</html>

Esto por norma general, como ya sabemos, devuelve puntitos, si nosotros en vez de puntitos queremos que devuelva números, sin ser una lista numerada, nuestro css, debe quedar de la siguiente manera: 

body {
  counter-reset: my-counter 0; //resetea el numero, empieza en 0
}

.numbered-list {
  list-style-type: none;
  padding: 0;
}

.numbered-list li::before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
}
  • Selecciona los elementos li dentro de la lista (ul) con la clase numbered-list.
  • counter-increment: my-counter; incrementa el contador my-counter en 1 para cada elemento de la lista.
  • content: counter(my-counter) ". "; agrega el contenido del contador seguido de un punto y un espacio antes del contenido real del elemento li.

Este código CSS se utiliza para numerar los elementos de una lista desordenada de forma personalizada utilizando el contador my-counter.

RESULTADO:

Espero que os guste, feliz domingo. 🙂

Post Views: 18

Deja un comentario