CSS-Pseudo-Elemente

Das CSS-Pseudo-Elemente-Modul definiert abstrakte Elemente, die nicht direkt im Dokumentbaum vorhanden sind. Diese abstrakten Elemente, sogenannte Pseudo-Elemente, repräsentieren Teile des Render-Baums, die ausgewählt und gestaltet werden können. Pseudo-Elemente werden verwendet, um Abstraktionen über den Dokumentbaum hinaus zu schaffen, die vom Dokumentbaum selbst nicht bereitgestellt werden.

Pseudo-Elemente werden durch zwei Doppelpunkte (::) vorangestellt. Sie fügen Selektoren Pseudo-Elemente hinzu (wie bei p::first-line), um diese künstlichen Elemente gezielt anzusprechen und zu gestalten.

Pseudo-Elemente ermöglichen das Ansprechen von Entitäten, die nicht im HTML enthalten sind, sowie von Inhaltsbereichen, die sonst nicht ohne zusätzliche Markup-Elemente gezielt angesprochen werden könnten. Betrachten Sie beispielsweise 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-Pseudo-Element ansprechen. Ein weiteres Beispiel ist das ::selection-Pseudo-Element, das den Inhalt anspricht, der derzeit von einem Benutzer hervorgehoben wird, und es erlaubt, diesen Bereich während der Interaktion mit dem Benutzer stilistisch zu verändern. Ebenso ermöglicht das ::first-line-Pseudo-Element, die erste Zeile eines Elements anzusprechen. Diese wird automatisch aktualisiert, wenn sich die Zeichenanzahl der ersten Zeile ändert, ohne die Zeilenlänge des Elements abfragen zu müssen.

Referenz

Selektoren

Die Spezifikation definiert auch die Pseudo-Elemente ::details-content und ::search-text sowie die Sub-Pseudo-Elemente ::postfix und ::prefix. Diese werden derzeit von keinem Browser unterstützt. Das ::highlight()-Pseudo-Element ist in diesem Modul enthalten, die meisten Details hierzu werden jedoch in der CSS Custom Highlight API spezifiziert.

Schnittstellen

Begriffe

Leitfäden

CSS-Pseudo-Elemente

Alphabetische Liste der in allen CSS-Spezifikationen und WebVTT definierten Pseudo-Elemente.

Lernen: Pseudo-Klassen und Pseudo-Elemente

Teil des CSS-Abschnitts über Selektoren. Dieser Artikel definiert, was ein Pseudo-Element ist, wie es mit Pseudo-Klassen kombiniert und für das Generieren von Inhalten mit den Pseudo-Elementen ::before und ::after verwendet werden kann.

Anleitung: Schöne Boxen mit Hilfe von Pseudo-Elementen erstellen

Beispiel für das stilistische Gestalten generierter Inhalte mithilfe der Pseudo-Elemente ::before und ::after für visuelle Effekte.

Verwandte Konzepte

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4

Siehe auch