En este tutorial trabajaremos con el pseudoelemento ::marker, que nos brinda acceso de estilo a la «caja de marcadores» en los elementos de una lista. Luego podremos utilizarlo para reemplazar las viñetas predeterminadas de una lista con íconos, texto, SVG; ¡casi lo que queramos! Echemos un vistazo.
Lo que vamos a crear
See the Pen Next-level List Bullets with the ::marker Pseudo-element by Angel Gilberto Paz Escalante (@angel-gilberto-paz-escalante) on CodePen.
La estructura de un elemento de lista
Las listas y los elementos de lista han existido desde que se concibió HTML, y aunque siempre hemos podido estilizarlos, los diseñadores nunca han prestado mucha atención a su estructura. Los elementos de las listas tienen una viñeta y un poco de texto, ¿cierto?
Su definición oficial describe que los elementos de lista constan de una caja de bloque principal, con una caja de marcador para designar una viñeta.
Para estilizar los elementos de las listas, lo que solemos hacer es eliminar las viñetas y añadir elementos adicionales (a menudo pseudoelementos o imágenes de fondo) para crear los nuestros.
Sin embargo, actualmente, como parte del módulo de pseudoelementos de CSS 4, tenemos un nuevo elemento para experimentar llamado marker. Esto nos brinda acceso directo a la caja de marcadores (acceso directo a la viñeta) generado por el navegador.
Propiedades permitidas del pseudoelemento marker de CSS
Podemos usar este acceso directo para estilizar las viñetas hasta cierto punto. Por el momento, hay un número limitado de propiedades disponibles:
- propiedades
font-* white-spacecolordirectioncontentanimationtransition
Por ahora no podemos utilizar estilos para background, ni para margin, padding, width, height, etc. ¡Pero aun con las propiedades que tenemos, podemos crear algunas viñetas muy atractivas!
Compatibilidad con navegadores
La compatibilidad con los navegadores es bastante buena, y la mayoría de ellos admiten el uso de marker. Y cualquier navegador antiguo, que no sea compatible, simplemente ignorará cualquier estilo de marker y mostrará el estilo predeterminado de la viñeta o la segunda opción definida. ¡Así que no hay razón para no utilizar marker!
Ejemplo con la propiedad List-style-type
Analizo más ejemplos en el video tutorial (como puedes ver en la demostración), pero por ahora me gustaría empezar mostrando la forma «antigua» de hacer las cosas.
Podemos utilizar list-style-type para definir cuál debería ser la viñeta:
li {
list-style-type: '> ';
}
Esto simplemente reemplazará la viñeta en los elementos de nuestra lista personalizada con >. Y podemos poner el texto que queramos en este valor. ¡Incluso un emoji!
También aquí podemos usar la propiedad color para cambiar cualquier texto que esté en la caja de marcador y en el bloque principal. Desafortunadamente, esto significa que no puedes colorear cada parte por separado.
Ejemplo con el pseudoelemento marker
Ahora veamos cómo nos puede ayudar el pseudoelemento marker. En un ejemplo similar, podemos dirigirnos específicamente al marcador usando li::marker.
li::marker {
color: green;
}
Al cambiar el color de esta forma, solo cambiamos la viñeta, no el texto dentro del elemento de la lista.
Mira este ejemplo, en el que me dirigí a todos los elementos de ::marker, los hice verdes y luego me dirigí únicamente al segundo elemento child y lo hice grande y azul.
Para cambiar lo que es la viñeta en sí, puedes utilizar la propiedad content: ''; y agregar caracteres como lo hicimos en el primer ejemplo con list-style-type. Nuevamente, los emojis también funcionan.
Elementos que no son de lista como elementos de lista
Es posible que quieras mostrar algunos de tus elementos como elementos de una lista, incluso si no lo son. Por ejemplo, con la propiedad display podemos cambiar la manera en que aparece un párrafo y luego dirigirnos también a su pseudoelemento ::marker.
p {
display: list-item;
}
p::marker {
content: '❤️';
}
Estilizar listas ordenadas
Las listas ordenadas también pueden ser manipuladas. La numeración suele ser muy importante cuando se utilizan listas ordenadas, así que hagamos que nuestros números sean más interesantes cambiando el contenido a una cadena de texto con el contador list-item anexado:
ol li::marker {
content: 'Step ' counter(list-item);
color: green;
}
ol li:hover::marker {
color : blue;
}También añadimos un estilo de «hover» a esta lista, cambiando el color del marcador cuando el cursor del ratón pase sobre él. Y para llevar este estilo aún más lejos, también puedes usar transiciones en el color.
Notarás que el relleno está apretado en estos elementos de la lista, y eso se debe a que eliminé todo el «padding» de manera predeterminada. Para volver a ponerlo, agrégalo al elemento li.
Utilizar SVG como marcador
Para nuestro último ejemplo, ¡vamos a usar un icono SVG como marcador! Podemos hacer esto codificando un SVG como un URI de datos (utiliza este codificador para obtener el código que deseas) y pegándolo directamente en el CSS, de esta manera:
li::marker {
content: url("Data URI goes in here");
}Recursos útiles
Bibliografía
La fuente original de este artículo es la siguiente:
https://webdesign.tutsplus.com/ Lectura complementaria: https://escss.blogspot.com/
