Cómo personalizar listas HTML con CSS

Publicado el 1 de octubre de 2020
Actualizado el 2 de octubre de 2020

Las listas en HTML se utilizan para mucho más que enumerar una serie de puntos. En realidad son un recurso muy interesante para poder maquetar elementos como barras de navegación, pestañas, etc.

Podemos distinguir tres tipos de listas HTML:

  • Listas desordenadas
  • Listas ordenadas
  • Listas de definición

Cada una de las cuales tiene sus propias características y limitaciones que podemos cambiar gracias a la magia del CSS.

Centrar listas HTML por CSS

Centrar una lista por CSS no es tan fácil como parece.

Si intentas aplicar lo obvio, (centrar el texto con text-align: center;) verás que los puntos de las listas desordenadas o los números de las ordenadas quedan separados y el texto centrado.

Tal que así:

  • En un lugar de la Mancha,
  • de cuyo nombre no quiero acordarme,
  • no ha mucho tiempo que vivía un hidalgo
  • de los de lanza en astillero,
  • adarga antigua,
  • rocín flaco y galgo corredor.
  1. Una olla de algo más vaca que carnero,
  2. salpicón las más noches,
  3. duelos y quebrantos los sábados,
  4. lantejas los viernes,
  5. algún palomino de añadidura los domingos,
  6. consumían las tres partes de su hacienda.

Desde luego no es el resultado que buscamos, así que vamos a usar unas líneas de CSS para arreglarlo.

Crea una clase llamada, por ejemplo, centrar-listas y aplica en ella el centrado del texto.

Después aplica al elemento <ol> o <ul> con dicha clase alineamiento a la izquierda y display: inline-block;.

Código HTML

<div class="centrar-listas"> <ul> <li>En un lugar de la Mancha,</li> <li>de cuyo nombre no quiero acordarme,</li> <li>no ha mucho tiempo que vivía un hidalgo</li> <li>de los de lanza en astillero,</li> <li>adarga antigua,</li> <li>rocín flaco y galgo corredor.</li> </ul> </div> <div class="centrar-listas"> <ol> <li>Una olla de algo más vaca que carnero,</li> <li>salpicón las más noches,</li> <li>duelos y quebrantos los sábados,</li> <li>lantejas los viernes,</li> <li>algún palomino de añadidura los domingos,</li> <li>consumían las tres partes de su hacienda.</li> </ol> </div>

Código CSS

.centrar-listas { text-align: center; } .centrar-listas ul, .centrar-listas ol { text-align: left; display: inline-block; }

Resultado

  • En un lugar de la Mancha,
  • de cuyo nombre no quiero acordarme,
  • no ha mucho tiempo que vivía un hidalgo
  • de los de lanza en astillero,
  • adarga antigua,
  • rocín flaco y galgo corredor.
  1. Una olla de algo más vaca que carnero,
  2. salpicón las más noches,
  3. duelos y quebrantos los sábados,
  4. lantejas los viernes,
  5. algún palomino de añadidura los domingos,
  6. consumían las tres partes de su hacienda.

Cambiar la viñeta en las listas desordenadas

Las listas desordenadas en HTML son aquellas que muestran sus elementos precedidos de un símbolo, conocido como viñeta.

Podemos definir el tipo de viñeta empleada para cada elemento.

Para ello debemos especificarlo por medio del atributo type dentro de la etiqueta de <ul>, si queremos que el estilo sea válido para toda la lista, o dentro le la etiqueta <li> si queremos hacerlo específico de un solo elemento.

Por ejemplo:

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

Cuyo código sería:

<ul type="square"> <li>Elemento 1 </li> <li type="disc">Elemento 2 </li> <li>Elemento 3 </li> <li type="circle">Elemento 4 </li> </ul>

Por defecto, podemos elegir entre tres tipos de viñeta para las listas desordenadas en HTML:

  • Disc
  • Circle
  • Square

Pero, a través de CSS, podemos modificar las viñetas que preceden a cada elemento de la lista, cambiando su color, el símbolo o ambas cosas.

Para ello, lo que haremos es desactivar las viñetas por defecto y definir después qué símbolo vamos a utilizar.

div.lista-azul li { list-style: none; } div.lista-azul li::before { content: "►"; color: blue; display: inline-block; width: 1em; margin-left: -1em }

Por supuesto, queremos que los cambios se apliquen solo donde nos interese y no a todas las listas que podamos utilizar en nuestro sitio web.

Por lo tanto, creamos la correspondiente clase, en este caso lista-azul, desactivamos el estilo de lista por defecto con list-style: none y aplicamos la nueva viñeta, con sus características, mediante el pseudoelemento ::before del selector li.

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

Personalizar listas con emoticonos

Los emojis que usamos en redes sociales, mensajes, etc. son códigos UNICODE, así que podemos usarlos para personalizar las viñetas de las listas HTML de nuestro sitio web.

Para ello usaremos el atributo content del pseudoelemento ::before

ul li::before { content: "😁 " } .lista-ok li::before { content: "👍 "; } .lista-corazon li::before { content: "❤ "; }

Personalizar listas ordenadas con CSS

Al igual que con las listas desordenadas, también podemos personalizar los numeradores de las listas numeradas con CSS.

Para ello usaremos los contadores CSS, que son variables cuyos valores se pueden incrementar mediante reglas CSS.

Para trabajar con contadores CSS usaremos las siguientes propiedades:

  • counter-reset - Crea o reinicia un contador
  • counter-increment - Incrementa un valor de contador
  • content - Inserta contenido generado
  • counter()counters(): Función que agrega el valor de un contador a un elemento

Digamos que queremos crear la siguiente lista numerada personalizada:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
  4. Elemento 4
  1. Elemento 6
  2. Elemento 8
  3. Elemento 10
  4. Elemento 12

Código HTML

Creamos dos <div> en cada uno de los cuales incluimos una lista numerada, asignándoles a cada cual una clase:

<div class="lista-numerada-1"> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> </ol> </div> <div class="lista-numerada-2"> <ol> <li>Elemento 6</li> <li>Elemento 8</li> <li>Elemento 10</li> <li>Elemento 12</li> </ol> </div>

Código CSS

Para cada una de las listas ordenadas definimos un contados con counter-reset y establecemos el incremento a aplicar con counter-increment.

Anulamos el numerador por defecto con list-style: none; e indicamos el contenido y propiedades de las nuevas viñetas con el pseudoelemento ::before de los elementos de lista.

.lista-numerada-1 ol { list-style: none; counter-reset: contador1; } .lista-numerada-1 ol li { counter-increment: contador1; } .lista-numerada-1 ol li::before { content: counter(contador1) ". "; color: red; font-weight: bold; } .lista-numerada-2 ol { list-style: none; counter-reset: contador2 4; } .lista-numerada-2 ol li { counter-increment: contador2 2; } .lista-numerada-2 ol li::before { content: counter(contador2) ") "; color: blue; font-weight: bold; }

Al crear un contador con counter-reset podemos indicar el valor inicial, que será 0 de no hacerlo.

También podemos establecer el valor del incremento de counter-increment con un número. Si no indicamos nada , el incremento será 1.

Anidar listas

Las etiquetas de lista se pueden anidar para conseguir listas mixtas combinando diferentes estilos.

Por ejemplo:

Párrafos famosos
  • Quijote
    1. En un lugar de la Mancha,
    2. de cuyo nombre no quiero acordarme
  • Chiquito
    • Por la gloria de mi madre,
    • está la cosa muy malar.
<style type="text/css"> .lista-azul li { list-style: none; } .lista-azul li::before { content: "►"; color: blue; display: inline-block; width: 1em; margin-left: -1em } </style> <div><strong>Párrafos famosos</strong> <ul> <li type="square"><em>Quijote</em> <ol> <li>En un lugar de la Mancha,</li> <li>de cuyo nombre no quiero acordarme</li> </ol> </li> <li><em>Chiquito</em> <ul class="lista-azul"> <li>Por la gloria de mi madre,</li> <li>está la cosa muy malar.</li> </ul> </li> </ul> </div>

En resumen

Realmente, podemos personalizar las listas HTML usando cualquier cosa que se pueda incluir en el content del pseudoelemento ::before, como imágenes o textos.

Y, dependiendo del nivel al que apliquemos la personalización de la viñeta, podemos conseguir listas muy chulas para, por ejemplo, barras de navegación, tablas de contenido, listados, etc.

Si haces una búsqueda en Internet encontrarás cientos de páginas con códigos y símbolos para usar en tus listas.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram