CSS ::marker
vous permet de modifier le contenu ainsi que certains styles de puces et de numéros dans les listes HTML.
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 de documents. 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 la liste HTML non triée 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 se présente 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 de la 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 la mise à disposition de ::marker
, vous pouviez styliser les listes en utilisant 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 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 offre beaucoup plus de contrôle sur les styles de 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 liste, et ::marker
vous permet de ne cibler que la zone de repère. La propriété 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 styles à appliquer aux repères.
Modifier tous les éléments de la liste
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
Modifier un seul élément de 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 des listes numérotées
Mais qu'en est-il d'un <ol>
? Le repère d'un élément de liste numérotée est un numéro 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 é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
Le cabine des outils pour les développeurs Chrome vous aide à inspecter, déboguer et modifier les styles que vous appliquez aux pseudo-éléments ::marker
.
Ressources
Pour en savoir plus sur ::marker
, consultez la page suivante: