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.

  1. esto es
  2. una lista
  3. ordenada
  • esto es
  • una lista
  • desordenada

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.

  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
ul {
    list-style-type: circle;
}

Y ahora un ejemplo para una lista ordenada.

  1. Elemento de lista 1
  2. Elemento de lista 2
  3. Elemento de lista 3
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.

  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
ul li::marker {
    color: green;
}

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.

  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
ul li {
    padding-left: 0.5rem; // separamos un poco el icono del texto
}

ul li::marker{
    content: '❥';
    color: #cc00ff;
}
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
ul li {
    padding-left: 0.5rem; // separamos un poco el icono del texto
}

ul li::marker{
    content: '➤';
    color: #ff9900;
}
  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
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.

  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
<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.

👉  Bulk Pinterest Pinner - Sube imágenes a Pinterest en masa

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

  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3
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.

  • Elemento de lista 1
  • Elemento de lista 2
  • Elemento de lista 3

Lo que hemos hecho aquí es definir dos atributos con data-* (data-emoji y data-emoji-hover).

En cada uno colocamos el emoji a mostrar para posteriormente recuperarlos con la función de CSS attr y asignarlos al content en modo normal y al hacer hover.

<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 👇.

👇Tu comentario