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
::after
::before
::file-selector-button
::first-letter
::first-line
::grammar-error
::highlight()
::marker
::placeholder
::selection
::spelling-error
::target-text
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
CSSPseudoElement
SchnittstelleCSSPseudoElement.element
EigenschaftCSSPseudoElement.type
Eigenschaft
Begriffe
- Pseudoelement Glossareintrag
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
::backdrop
-
Web Video Text Tracks Format (WebVTT) Hinweise:
-
CSS-Scoping Modul
-
CSS-Shadow-Parts Modul
-
CSS-View-Transitions Modul
::view-transition
Experimentell::view-transition-image-pair()
Experimentell::view-transition-group()
Experimentell::view-transition-new()
Experimentell::view-transition-old()
Experimentell
-
placeholder
Attribut des<input>
-Elements -
:placeholder-shown
Selektor -
AnimationEvent.pseudoElement
Eigenschaft -
KeyframeEffect.pseudoElement
Eigenschaft -
TransitionEvent.pseudoElement
Eigenschaft
Spezifikationen
Specification |
---|
CSS Pseudo-Elements Module Level 4 |
Siehe auch
- Spezifität
- CSS-Selektoren Modul
- CSS-Shadow-Parts Modul
- CSS generierter Inhalt Modul
- CSS positioniertes Layout Modul
- CSS Custom Highlight API