::marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Der ::marker CSS Pseudo-Element selektiert das Markierungsfeld eines Listenelements, das typischerweise ein Aufzählungszeichen oder eine Nummer enthält. Es funktioniert bei jedem Element oder Pseudo-Element, das auf display: list-item gesetzt ist, wie zum Beispiel die <li> und <summary> Elemente.
Probieren Sie es aus
li::marker {
content: "✝ ";
font-size: 1.2em;
}
<p>Group known as 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>
Erlaubte Eigenschaften
Das ::marker Pseudo-Element unterstützt eine begrenzte Anzahl von CSS-Eigenschaften, einschließlich:
- Aller Schrift-Eigenschaften
- Der
white-spaceEigenschaft colortext-combine-upright,unicode-bidi, unddirectionEigenschaften- Der
contentEigenschaft - Aller Animation und Übergang Eigenschaften
Hinweis: Die Spezifikation gibt an, dass in Zukunft zusätzliche CSS-Eigenschaften unterstützt werden könnten.
Syntax
css
::marker {
/* ... */
}
Beispiele
HTML
html
<ul>
<li>Peaches</li>
<li>Apples</li>
<li>Plums</li>
</ul>
CSS
css
ul li::marker {
color: red;
font-size: 1.5em;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |
Browser-Kompatibilität
Siehe auch
- HTML-Elemente, die standardmäßig Markierungsfelder haben:
<ol>,<li>,<summary> - CSS generierter Inhalt Modul
- CSS Listen und Zähler Modul
- CSS Zähler-Stile Modul