Puces personnalisées avec CSS ::Marker

Adam Argyle

Oriol Brufau

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

<ph type="x-smartling-placeholder">

Présentation des pseudo-éléments

Un pseudo-élément représente une partie du document qui n'est pas représentée dans le arborescence de documents. Par exemple, vous pouvez sélectionner la première ligne d'un paragraphe en utilisant Le pseudo-élément p::first-line, même s'il n'y a pas d'encapsulation d'élément HTML 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>

Le rendu est le suivant avec le style par défaut:

Le point au début de chaque élément <ul> est généré lors du rendu de la liste, et ne dispose pas de son propre élément HTML. ::marker est un pseudo-élément représentant ce point, ou le nombre au début d'un .

Créer un repère

Le cadre de marqueur de pseudo-élément ::marker est généré automatiquement à l'intérieur de chaque élément de liste, avant le contenu réel et l'élément ::before pseudo-élément.

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 styliser des 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 permet de modifier la couleur, la taille et l'espacement des repères de Vous pouvez ainsi cibler des pseudo-éléments de repère individuellement ou de manière globale dans votre CSS:

li::marker {
  color: hotpink;
}

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

::marker vous offre beaucoup plus de contrôle sur les styles des repères que list-style-type. mais 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 liste, et ::marker vous permet de ne cibler que la zone du repère. background fonctionne avec list-style-type, mais pas avec ::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;
}

Modifier le contenu d'un repère

Voici quelques exemples de style pour vos 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 en 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 numérotées

Qu'en est-il d'un <ol> ? Le marqueur sur un élément de liste trié est un numéro par par défaut, et non un point ou une « puce ». 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 utiliser ::marker pour appliquer un style Vous pouvez aussi utiliser la valeur du contenu du repère pour créer votre propre numérotation. présentation.

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.

Ressources

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

• Listes, repères et compteurs CSS dans Smashing Magazine
• Compter avec les compteurs CSS et la grille CSS de CSS-Tricks
• Utiliser des compteurs CSS sur MDN