Viñetas personalizadas con marcador de CSS

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Navegadores compatibles

  • Chrome: 86.
  • Edge: 86.
  • Firefox: 68.
  • Safari: 11.1.

Origen

::marker de CSS te permite cambiar el contenido y algunos de los estilos de viñetas y números en las listas HTML.

Ejemplos de estilos de viñetas. Ver fuente

Introducción a los seudoelementos

Un pseudoelemento representa una parte del documento que no se representa en el árbol del documento. Por ejemplo, puedes seleccionar la primera línea de un párrafo con el pseudoelemento p::first-line, aunque no haya ningún elemento HTML que una esa línea de texto.

Considera la siguiente lista desordenada en HTML:

<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 el diseño predeterminado:

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 pseudoelemento que representa ese punto o el número al comienzo de un elemento de lista ordenada.

Cómo crear un marcador

El cuadro de marcador del seudoelemento ::marker se genera automáticamente dentro de cada elemento de 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;
}

Aplica diseño a un marcador

Antes de que ::marker estuviera disponible, podías aplicar diseño a las listas con list-style-type y list-style-image para cambiar el símbolo del elemento de la 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, ya que te permite segmentar pseudoelementos de marcador 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 funciona 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.

Enumerar diseños
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 la lista afecta a todo el elemento de la lista.
Estilos de marcador
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 de marcadores te permite enfocarte en ellos.


Cambia el contenido de un marcador

Estos son algunos ejemplos de cómo aplicar diseño a tus marcadores.

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: "😍";
}

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>");
}

Cómo cambiar las listas ordenadas

Pero ¿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 los CSS, estos se llaman contadores y tienen propiedades para establecer o restablecer el punto de inicio y finalización del número, o bien para cambiarlos a, por ejemplo, números romanos. 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;
}

Depurar

La cabina de las Herramientas para desarrolladores de Chrome te ayuda a inspeccionar, depurar y modificar los estilos que aplicas a los seudoelementos ::marker.

Las Herramientas para desarrolladores están abiertas y muestran los estilos del usuario-agente y los del usuario
Descripciones de los estilos de marcadores de DevTools.

Recursos

Puedes obtener más información sobre ::marker en los siguientes recursos: