Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
::marker
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Lepseudo-élémentCSS::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 avecdisplay: 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 lesproprié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 detransition
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
Voir aussi
- Les éléments HTML comportant un marqueur par défaut :
- Le moduleContenu généré par CSS
- Le moduleListes et compteurs CSS
- Le moduleStyles de compteur CSS