Welche Funktion hat pseudo-element::marker in CSS?

Welche Rolle spielt pseudo-element::marker in CSS? Es werden spezielle Codebeispiele benötigt.

Die Rolle von pseudo-element::marker in CSS besteht darin, Stile für den Markierungsteil von Listenelementen festzulegen. In einer regulären HTML-Liste bezieht sich der Markup-Teil auf das Aufzählungszeichen, die Zahl oder den benutzerdefinierten Stil vor dem Listenelement. Durch die Verwendung des Pseudoelements ::marker können wir das Erscheinungsbild des markierten Teils der Listenelemente anpassen und so den visuellen Effekt der Webseite verbessern.

Im Folgenden finden Sie einige häufig verwendete Codebeispiele, um die spezifische Anwendung des ::marker-Pseudoelements zu demonstrieren:

1. Benutzerdefinierter Markierungsstil für ungeordnete Listen:

ul {
  list-style-type: none;
}

li::marker {
  content: "★";
  color: red;
  font-weight: bold;
}

Im obigen Code ändern wir zunächst die Standardmarkierung des Ungeordneten list Um den Stil abzubrechen, setzen Sie list-style-type auf none. Als nächstes verwenden Sie das Pseudoelement ::marker, um den Markierungsteil des Listenelements zu formatieren. In diesem Beispiel stellen wir den Tag-Inhalt auf ★, die Farbe auf Rot und die Schriftstärke auf Fett ein.

2. Benutzerdefinierter Markierungsstil für geordnete Listen:

ol {
  list-style-type: none;
}

li::marker {
  content: counter(li);
  color: blue;
  font-size: 20px;
  margin-right: 10px;
}

Im obigen Code löschen wir auch den Standardmarkierungsstil der geordneten Liste. Verwenden Sie dann das Pseudoelement ::marker, um den Markierungsteil des Listenelements zu formatieren. In diesem Beispiel setzen wir den Markerinhalt mithilfe von counter(li) auf den Zählwert der Listenelemente. Außerdem stellen wir die Markierungsfarbe auf Blau, die Schriftgröße auf 20 Pixel und den rechten Rand des Markierungsteils auf 10 Pixel ein.

Es ist zu beachten, dass das Pseudoelement ::marker nur auf Listenelemente (d. h. li-Elemente) und nicht auf andere Elementtypen wie Absätze (p-Elemente) oder Titel (h1-h6-Elemente) angewendet werden kann ), usw.

Zusammenfassung:
Das Pseudoelement ::marker in CSS kann verwendet werden, um den Stil des Markierungsteils der Listenelemente anzupassen. Durch Festlegen der relevanten Attribute des Pseudoelements ::marker können wir den Inhalt, die Farbe, den Schriftstil usw. der Marke ändern und so den visuellen Effekt der Webseite erhöhen. Der obige Beispielcode kann uns helfen, das Pseudoelement ::marker besser zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonWelche Funktion hat pseudo-element::marker in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!