Pseudo-élément CSS ::marker
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Want more support for this feature? Tell us why.
Le pseudo-élément CSS ::marker représente le marqueur d'un élément d'une liste à puces ou numérotée. Il fonctionne sur tout élément ou pseudo-élément défini avec display: list-item, tel que les éléments <li> et <summary>.
Exemple interactif
li::marker {
content: "✝ ";
font-size: 1.2em;
}
<p>Groupe connu sous le nom de « Mercury Seven » :</p>
<ul>
<li>Malcolm Scott Carpenter</li>
<li>Leroy Gordon (Gordo) Cooper Jr.</li>
<li>John Herschel Glenn Jr.</li>
<li>Virgil Ivan (Gus) Grissom</li>
<li>Walter Marty (Wally) Schirra Jr.</li>
<li>Alan Bartlett Shepard Jr.</li>
<li>Donald Kent (Deke) Slayton</li>
</ul>
Propriétés autorisées
Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise ::marker :
- Toutes les propriétés de police
- La propriété
white-space color- Les propriétés
text-combine-upright,unicode-bidietdirection - La propriété
content - Toutes les propriétés d'animation et de transition
Note : La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.
Syntaxe
css
::marker {
/* ... */
}
Exemples
HTML
html
<ul>
<li>Pêches</li>
<li>Pommes</li>
<li>Prunes</li>
</ul>
CSS
css
ul li::marker {
color: red;
font-size: 1.5em;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |
Compatibilité des navigateurs
Voir aussi
- Les éléments HTML comportant un marqueur par défaut :
- Le module Contenu généré par CSS
- Le module Listes et compteurs CSS
- Le module Styles de compteur CSS