::marker CSS pseudo-element
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Das ::marker CSS Pseudoelement wählt das Markierungsfeld eines Listenelements aus, das typischerweise ein Symbol oder eine Zahl enthält. Es funktioniert bei jedem Element oder Pseudoelement, das auf display: list-item gesetzt ist, wie etwa 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 Pseudoelement unterstützt eine begrenzte Anzahl von CSS-Eigenschaften, einschließlich:
- Alle Animation und Transition Eigenschaften
- Alle Schriftarteigenschaften
colorcontentcounter-increment,counter-reset, undcounter-setquotestext-combine-upright,unicode-bidi, unddirectionwhite-space
Hinweis: Die Spezifikation gibt an, dass in Zukunft zusätzliche CSS-Eigenschaften unterstützt werden können.
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
| Spezifikation |
|---|
| 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ählerstile Modul