Ahora es trivial personalizar el color, el tamaño o el tipo de número o viñeta cuando se usa <ul> o <ol>.
Gracias a Igalia, patrocinada por Bloomberg, finalmente podemos dejar de lado nuestros trucos para darle estilo a las listas. ¡A ver!
Gracias a CSS ::marker, podemos cambiar el contenido y algunos de los estilos de viñetas y números.
Compatibilidad del navegador
::marker es compatible con Firefox para computadoras de escritorio y Android, con Safari para computadoras de escritorio y Safari para iOS (pero solo con las propiedades color y font-*, consulta Error 204163) y con los navegadores para computadoras de escritorio y Android basados en Chromium.
Seudoelementos
Ten en cuenta la siguiente lista esencial de HTML sin ordenar:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
Esto da como resultado la siguiente renderización:
El punto al comienzo de cada elemento <li> no tiene costo. El navegador está dibujando y creando un cuadro de marcador generado para ti.
Hoy nos complace hablar sobre el seudoelemento ::marker, que brinda la capacidad de definir el estilo del elemento de viñeta que los navegadores crean por ti.
Cómo crear un marcador
El cuadro de marcador del seudoelemento ::marker se genera automáticamente dentro de cada elemento de los elementos de la lista, antes del contenido real y del seudoelemento ::before.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
Por lo general, los elementos de lista son elementos HTML <li>, pero otros elementos también pueden convertirse en elementos de lista con display: list-item.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
Cómo aplicar diseño a un marcador
Hasta el ::marker, se podía diseñar las listas con list-style-type y list-style-image para cambiar el símbolo del elemento de lista con 1 línea de CSS:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
Es práctico, pero necesitamos más. ¿Y si cambiamos el color, el tamaño, el espaciado, etc.? En estos casos, ::marker recurre al rescate. Permite la segmentación individual y global de los siguientes pseudoelementos de CSS:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
La propiedad list-style-type ofrece posibilidades de diseño muy limitadas. El seudoelemento ::marker significa que puedes segmentar el marcador y aplicar diseños directamente a él. Esto permite un mayor control.
Dicho esto, no puedes usar todas las propiedades de CSS en un ::marker. En la especificación, se indica claramente la lista de propiedades permitidas y no permitidas. Si intentas algo interesante con este seudoelemento y no funciona, la siguiente lista es una guía sobre lo que se puede y no se puede hacer con CSS:
Propiedades ::marker de CSS permitidas
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
El cambio del contenido de un ::marker se realiza con content, en lugar de list-style-type. En el siguiente ejemplo, se le da estilo al primer elemento con list-style-type y al segundo con ::marker. En el primer caso, las propiedades se aplican a todo el elemento de la lista, no solo al marcador, lo que significa que se están animando tanto el texto como el marcador. Cuando se usa ::marker, podemos orientar solo el cuadro del marcador y no el texto.
Además, observa que la propiedad background no permitida no tiene efecto.
li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
Resultados mixtos entre el marcador y el elemento de la lista
li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
Resultados enfocados entre el marcador y el elemento de la lista
Cómo cambiar el contenido de un marcador
Estas son algunas maneras de aplicar estilo a tus marcadores.
Cómo cambiar todos los elementos de la lista
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
Cómo cambiar solo un elemento de la lista
li:last-child::marker {
content: "😍";
}
Cambia un elemento de la lista a SVG
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
Cambio de listas numeradas
¿Pero qué sucede con las <ol>? De forma predeterminada, el marcador de un elemento ordenado de la lista es un número y no una viñeta. En CSS, estos se denominan contadores y son bastante potentes. Incluso tienen propiedades para establecer y restablecer dónde comienza y termina un número, o cambiar a números romanos. ¿Podemos darle un estilo? Sí, incluso podemos usar el valor de contenido de los marcadores para crear nuestra propia presentación de numeración.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
Depuración
Las Herramientas para desarrolladores de Chrome están listas para ayudarte a inspeccionar, depurar y modificar los estilos que se aplican a los seudoelementos ::marker.
Diseño futuro de seudoelementos
Obtén más información sobre ::marker en los siguientes artículos:
- Listas, marcadores y contadores de CSS de Smashing Magazine
- Cómo contar con contadores y cuadrículas de CSS de Trucos de CSS
- Usa contadores de CSS de MDN
Es genial tener acceso a algo que ha sido difícil de diseñar. Es posible que desees aplicar diseño a otros elementos generados automáticamente. Es posible que te frustre con <details> o el indicador de autocompletado de entrada de búsqueda, ya que no se implementan de la misma manera en todos los navegadores. Una forma de compartir lo que necesitas es creando un deseo en https://webwewant.fyi.