::marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |
Compatibilité des navigateurs
Loading…
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