::marker

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das ::marker CSS Pseudo-Element wählt das Marker-Feld eines Listenelements aus, 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 den <li> und <summary> Elementen.

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>

Zulässige Eigenschaften

Das ::marker Pseudo-Element unterstützt eine begrenzte Anzahl von CSS-Eigenschaften, einschließlich:

Hinweis: Die Spezifikation gibt an, dass in Zukunft möglicherweise zusätzliche CSS-Eigenschaften unterstützt werden.

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

BCD tables only load in the browser

Siehe auch