Personaliza tus aburridas listas HTML

Las listas, tanto ordenadas como desordenadas, se suelen utilizar bastante a la hora de presentar información en la web ya que rompen el patrón monótono de los párrafos y también facilitan la lectura.

Pero este tipo de listas son bastante aburridas visualmente ya que en la mayoría de web las vemos iguales, con el estilo estándar.

!Vamos a darle un poco de vida con CSS!

Modificar el marcador de la lista

Con la propiedad de CSS list-style-type podemos cambiar la forma del marcador de lista, tanto para las listas ordenadas como para las no ordenadas. Esta propiedad admite diferentes valores, puedes verlos todos aquí.

Vamos a ver un ejemplo con una lista desordenada.

ul {
    list-style-type: circle;
}

Y ahora un ejemplo para una lista ordenada.

ol {
    list-style-type: lower-roman;
}

Modificar el color

El pseudo-elemento ::marker nos permitirá hacer lo que queramos con el estilo del marcador de lista (viñeta/numérico).

Es reciente pero la gran mayoría de navegadores ya lo soporta. Consulta la compatibilidad.

Vamos a ver un par de ejemplos en los que cambiaremos el color a una lista ordenada y a una desordenada.

ul li::marker {
    color: green;
}

ol li::marker {
    color: #FF5F56;
}

Personalizar el marcador de lista a nuestro gusto

En el primer punto vimos que podemos cambiar el estilo del marcador de lista con la propiedad list-style-type. Pero esto nos limita a escoger entre los valores admitidos por dicha propiedad.

Ahora vamos a ver como podemos personalizar este marcador a nuestro gusto y poner el símbolo que queramos. Para ello, vamos a volver a usar el pseudo-elemento ::marker junto con la propiedad content.

Veamos algunos ejemplos.

ul li {
    padding-left: 0.5rem; // separamos un poco el icono del texto
}

ul li::marker{
    content: '❥';
    color: #cc00ff;
}

ul li {
    padding-left: 0.5rem; // separamos un poco el icono del texto
}

ul li::marker{
    content: '➤';
    color: #ff9900;
}

ul li {
    padding-left: 0.5rem; // separamos un poco el icono del texto
}

ul li::marker{
    content: '😱';
}

Podemos utilizar cualquier símbolo unicode e incluso emojis. Busca en Google alguna web desde donde copiarlos. Aquí te dejo una 👉 unicode-table.com

Un marcador diferente para cada elemento de la lista

Seguramente te hayas hecho la siguiente pregunta: ¿podría elegir un emoji para cada elemento de la lista?

Pues la respuesta es sí. Esto lo podemos hacer de manera sencilla mediante los atributos de datos data-*.

Aquí te muestro un ejemplo.

<ul>
  <li data-emoji="😁">Elemento de lista 1</li>
  <li data-emoji="😎">Elemento de lista 2</li>    
  <li data-emoji="🤩">Elemento de lista 3</li>
</ul>

ul li::marker{
    content: attr(data-emoji);
}

Bonus track – Modificar el marcador al pasar el cursor sobre él

Por último, vamos a ver cómo podemos modificar el estilo de la lista al pasar el cursor sobre los elementos (o al hacer clic si estamos en un móvil). Verás, esto queda bastante chulo.

Para conseguirlo vamos utilizar la pseudo clase :hover. Como dice Goyo Jiménez, no lo cuento, lo hago.

ul li::marker{
    color: blue;
    content: '♖'
}

ul li:hover::marker{
    content: '♜'
}

Y por último, vamos a ver un ejemplo de como podemos combinarlo todo. Crearemos una lista que tenga un emoji diferente por cada elemento y al pasar el ratón por encima cambiará cada uno de manera independiente.

<ul>
  <li data-emoji="😂" data-emoji-hover="😭">Elemento de lista 1</li>
  <li data-emoji="😧" data-emoji-hover="😨">Elemento de lista 2</li>    
  <li data-emoji="😡" data-emoji-hover="🤬">Elemento de lista 3</li>
</ul>

ul li::marker{
    content: attr(data-emoji);
}

ul li:hover::marker{
    content: attr(data-emoji-hover);

En este post hemos visto algunos ejemplos básicos con lo que puedes darle un toque personal a tus listas. Espero que te sirvan de ayuda.

Recuerda que puedes aplicar una gran cantidad de propiedades CSS, por ejemplo, podrías modificar el tamaño de los marcadores con font-size. En la imaginación está el límite. Bueno, y en aprender un poco de CSS… 😄

Esto es todo. Si tienes alguna duda puedes dejarla en los comentarios 👇.