CSS ::marker
te permite
cambiar el contenido y algunos estilos de viñetas y números en las listas HTML
Introducción a los seudoelementos
Un seudoelemento representa una parte del documento que no está representada en el
en el árbol de documentos. Por ejemplo, puedes seleccionar la primera línea de un párrafo usando
el seudoelemento p::first-line
, aunque no haya unión de elementos HTML
esa línea de texto.
Considera 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>
Que se renderiza de la siguiente manera con un estilo predeterminado:
El punto al comienzo de cada elemento <ul>
se genera como parte de la renderización.
la lista y que no tiene su propio elemento HTML. ::marker
es un
seudoelemento que representa ese punto, o el número al comienzo de una ordenación
elemento de lista.
Cómo crear un marcador
El cuadro de marcador del pseudoelemento ::marker
se genera automáticamente dentro de cada
elemento de elemento de lista, antes del contenido real y de ::before
seudoelemento.
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;
}
Aplica diseño a un marcador
Antes de que ::marker
estuviera disponible, podías diseñar listas con
list-style-type
y list-style-image
para cambiar el símbolo del elemento de lista:
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 mediante
lo que te permite orientar pseudoelementos de marcadores de forma 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 estilos de marcadores que list-style-type
,
pero no es compatible con todas las propiedades de CSS. Se permiten las siguientes propiedades:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Cambia el contenido de un ::marker
con content
, no con list-style-type
. En el siguiente ejemplo, se muestra cómo las propiedades de list-style-type
se aplican a todo el elemento de 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; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
Cómo cambiar el contenido de un marcador
A continuación, se incluyen algunos ejemplos de cómo aplicar ajustes de diseño a los marcadores.
Cambiar todos los elementos de la lista
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
Cómo cambiar un solo elemento de la lista
li:last-child::marker {
content: "😍";
}
Define 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
Sin embargo, ¿qué pasa con un <ol>
? De forma predeterminada, el marcador de un elemento de lista ordenada es un número, no un punto o una viñeta. En CSS, se denominan contadores y tienen propiedades para establecer o restablecer dónde comienza y termina el número, o cambiarlo, por ejemplo, a números romanos. Puedes usar ::marker
para diseñar
contadores y usar el valor del contenido del marcador
para crear tu propia numeración
presentación.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
Depurar
Chrome DevTools puede ayudarte a inspeccionar, depurar y modificar los estilos que aplicas a los seudoelementos ::marker
.
Recursos
Puedes obtener más información sobre ::marker
en los siguientes recursos: