Viñetas personalizadas con marcador de CSS

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Navegadores compatibles

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

Origen

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

Ejemplos de estilos de viñetas. Ver código fuente

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.

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 estilo de 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 del marcador te permite enfocarte en él.


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.

Se abre Herramientas para desarrolladores y muestra los estilos del usuario-agente y los estilos del usuario
Descripciones de las Herramientas para desarrolladores de los estilos de marcadores

Recursos

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