Puces personnalisées avec CSS ::Marker

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Navigateurs pris en charge

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

Source

::marker CSS vous permet de modifier le contenu et certains des styles de puces et de chiffres dans les listes HTML.

Exemples de styles de puces. Afficher la source

Présentation des pseudo-éléments

Un pseudo-élément représente une partie du document qui n'est pas représentée dans l'arborescence du document. Par exemple, vous pouvez sélectionner la première ligne d'un paragraphe à l'aide du pseudo-élément p::first-line, même si aucun élément HTML n'encapsule cette ligne de texte.

Prenons l'exemple de liste non ordonnée HTML suivante :

<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>

Ce qui s'affiche comme suit avec le style par défaut :

Le point au début de chaque élément <ul> est généré lors de l'affichage de la liste, et il ne possède pas son propre élément HTML. ::marker est un pseudo-élément représentant ce point ou le numéro au début d'un élément de liste ordonnée.

Créer un repère

La zone de repère du pseudo-élément ::marker est automatiquement générée dans chaque élément d'élément de liste, avant le contenu réel et le pseudo-élément ::before.

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

Les éléments de liste sont généralement des éléments HTML <li>, mais vous pouvez utiliser display: list-item pour transformer d'autres éléments en éléments de liste.

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

Appliquer un style à un repère

Avant que ::marker ne soit disponible, vous pouviez appliquer un style aux listes à l'aide de list-style-type et list-style-image pour modifier le symbole de l'élément de liste:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

::marker vous permet de modifier la couleur, la taille et l'espacement des repères en vous permettant de cibler les pseudo-éléments de repère individuellement ou globalement dans votre CSS :

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

::marker vous permet de contrôler beaucoup plus les styles des repères que list-style-type, mais il ne fonctionne pas avec toutes les propriétés CSS. Les propriétés suivantes sont autorisées :

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Modifiez le contenu d'un ::marker à l'aide de content, et non de list-style-type. L'exemple suivant montre comment les propriétés de list-style-type s'appliquent à l'ensemble de l'élément de la liste, et ::marker vous permet de ne cibler que la zone du repère. La propriété background fonctionne avec list-style-type, mais pas avec ::marker.

Styles de liste
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
 Le style de la liste affecte l'ensemble de l'élément de liste.
Styles de marqueur
li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
 Le style du repère vous permet de vous concentrer sur le repère.


Modifier le contenu d'un repère

Voici quelques exemples de styles de repères.

Modifier tous les éléments de la liste

li {
  list-style-type: "😍";
}

/* OR */

li::marker {
  content: "😍";
}

Modifier un seul élément de la liste

li:last-child::marker {
  content: "😍";
}

Définir des repères avec 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>");
}

Modifier les listes triées

Et un <ol> ? Par défaut, le repère d'un élément de liste ordonnée est un nombre, et non un point ou un "point". En CSS, ils sont appelés compteurs. Ils disposent de propriétés permettant de définir ou de réinitialiser le début et la fin du nombre, ou de les remplacer par des chiffres romains, par exemple. Vous pouvez également utiliser ::marker pour styliser les compteurs, et même utiliser la valeur du contenu du repère pour créer votre propre présentation de numérotation.

li::marker {
  content: counter(list-item) "› ";
  color: hotpink;
}

Déboguer

Les outils pour les développeurs Chrome peuvent vous aider à inspecter, déboguer et modifier les styles que vous appliquez aux pseudo-éléments ::marker.

Outils pour les développeurs ouverts et affichant les styles de l&#39;user-agent et des styles utilisateur
Descriptions des styles de repères dans DevTools.

Ressources

Pour en savoir plus sur ::marker, consultez les ressources suivantes: