CSS-Pseudoelemente

Das CSS-Pseudoelement-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, sogenannte Pseudoelemente, repräsentieren Teile des Renderbaums, die ausgewählt und gestaltet werden können. Pseudoelemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu erstellen, die von diesem nicht bereitgestellt werden.

Pseudoelemente werden mit einem Doppelpunkt (::) vorangestellt. Sie fügen Selektoren Pseudoelemente hinzu (wie in p::first-line), um diese virtuellen Elemente zu identifizieren und zu gestalten.

Pseudoelemente ermöglichen das Anvisieren von Entitäten, die nicht in HTML enthalten sind, und von Inhaltsbereichen, die sonst nicht ohne zusätzliches Markup angesprochen werden könnten. Betrachten Sie den Platzhalter eines <input>-Elements. Dies ist ein abstraktes Element und kein eigenständiger Knoten im Dokumentbaum. Sie können diesen Platzhalter mit dem ::placeholder-Pseudoelement auswählen. Ein weiteres Beispiel ist das ::selection-Pseudoelement, das den aktuell von einem Benutzer hervorgehobenen Inhalt auswählt, wodurch Sie das Markierte beim Interagieren des Benutzers mit dem Inhalt und beim Ändern der Auswahl gestalten können. Ähnlich dazu zielt das ::first-line-Pseudoelement auf die erste Zeile eines Elements ab und aktualisiert sich automatisch, wenn sich die Zeichenzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.

Referenz

Selektoren

Die Spezifikation definiert auch die Pseudoelemente ::details-content und ::search-text sowie die Unter-Pseudoelemente ::postfix und ::prefix. Diese werden derzeit von keinem Browser unterstützt. Das ::highlight()-Pseudoelement ist in diesem Modul enthalten, aber die meisten Details werden in der CSS Custom Highlight API bereitgestellt.

Schnittstellen

Begriffe

Leitfäden

CSS-Pseudoelemente

Alphabetische Liste der Pseudoelemente, die von allen CSS-Spezifikationen und WebVTT definiert werden.

Bausteine: Pseudoklassen und Pseudoelemente

Teil des CSS-Bausteinabschnitts über Selektoren. Dieser Artikel definiert, was ein Pseudoelement ist und wie es mit Pseudoklassen kombiniert und zur Generierung von Inhalten mit ::before und ::after-Pseudoelementen verwendet werden kann.

Anleitung zum Erstellen von dekorativen Boxen mit Pseudoelementen

Beispiel für die Gestaltung von generierten Inhalten mit ::before und ::after-Pseudoelementen für visuelle Effekte.

Verwandte Konzepte

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4

Siehe auch