CSS ::marker Pseudo-Element

Definition und Verwendung

CSS ::marker Pseudo-Elemente werden verwendet, um den Stil der Liste der Markierungen zu setzen.

Dieser Pseudo-Element ist für alle Elemente geeignet, die auf display: list-item gesetzt sind.

Hinweis：Nachfolgende Eigenschaften können mit ::marker Zusammen verwenden：

• Alle Schriftattribute
• Alle Animationseigenschaften
• Alle Übergangsattribute
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• Richtung

Beispiel

Beispiel 1

Stellen Sie Farbe und Schriftgröße für alle Liste der Markierungen ein：

::marker {
  font-size: 20px;
  color: red;
}

Probieren Sie selbst aus

Beispiel 2

Stellen Sie Inhalt, Farbe und Schriftgröße für die Liste der Markierungen der <ul>-Liste ein：

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

Probieren Sie selbst aus

Beispiel 3

Stellen Sie den <h2>-Element auf display: list-item und setzen Sie Inhalt und Farbe für die Liste der Markierungen：

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

Probieren Sie selbst aus

CSS-Syntax

::marker {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die den Pseudo-Element vollständig unterstützt.

zugehörige Seiten

Anleitung：CSS Pseudo-Element