::marker de CSS te permite cambiar el contenido y algunos de los estilos de viñetas y números en las listas HTML.
Introducción a los pseudoelementos
Un seudoelemento representa una parte del documento que no está representada en el árbol de documentos. Por ejemplo, puedes seleccionar la primera línea de un párrafo con el seudoelemento p::first-line, aunque no haya ningún elemento HTML que ajuste esa línea de texto.
Ten en cuenta la siguiente lista 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>
Con el estilo predeterminado, se renderiza de la siguiente manera:
El punto al comienzo de cada elemento <ul> se genera como parte de la renderización de la lista y no tiene su propio elemento HTML. ::marker es un seudoelemento que representa ese punto o el número al comienzo de un elemento de lista ordenado.
Cómo crear un marcador
El cuadro de marcador del seudoelemento ::marker se genera automáticamente dentro de cada elemento 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;
}
Los elementos de lista suelen ser elementos HTML <li>, pero puedes usar display: list-item para convertir otros elementos en elementos de lista.
<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 cambiar el estilo de un marcador
Antes de que ::marker esté disponible, podías diseñar listas con list-style-type y list-style-image para cambiar el símbolo del elemento:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
::marker agrega la capacidad de cambiar el color, el tamaño y el espaciado de los marcadores, ya que te permite segmentar los pseudoelementos de los marcadores de manera individual o global en tu CSS:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
::marker te brinda mucho más control sobre los diseños de los marcadores que list-style-type, pero no funciona con todas las propiedades de CSS. Se permiten las siguientes propiedades:
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
Cambia el contenido de una ::marker con content, no con list-style-type. En el siguiente ejemplo, se muestra cómo se aplican las propiedades de list-style-type a todo el elemento de la lista, y ::marker te permite segmentar solo el cuadro de marcador. La propiedad background funciona con list-style-type, pero no con ::marker.
li:nth-child(1) {
list-style-type: '?';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
El diseño de lista afecta a todo el elemento de esta.
li:nth-child(2)::marker {
content: '!';
font-size: 2rem;
background: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}
El diseño del marcador te permite centrarte en él.
Cómo cambiar el contenido de un marcador
A continuación, se incluyen algunos ejemplos de formas de aplicarles 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: "😍";
}
Cómo definir marcadores con 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>");
}
Cambiar listas ordenadas
¿Qué sucede con un <ol>? De forma predeterminada, el marcador de un elemento ordenado es un número, no un punto ni una "viñeta". En CSS, estos se llaman Contadores y tienen propiedades para establecer o restablecer el punto de inicio y fin de un número, o bien para cambiar a números romanos, por ejemplo. También puedes usar ::marker para aplicar diseño a los contadores y hasta usar el valor del contenido del marcador para crear tu propia presentación de numeración.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
Depuración
La cabina de las Herramientas para desarrolladores de Chrome te ayudará a inspeccionar, depurar y modificar los estilos que aplicas a los seudoelementos ::marker.
Recursos
Obtén más información sobre ::marker en los siguientes artículos: