CSS-Pseudoelemente

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

Pseudoelemente werden mit einem Doppelpunkt (::) versehen. Sie fügen Pseudoelemente Selektoren hinzu (wie in p::first-line), um diese falschen Elemente zu zielen und zu stylen.

Pseudoelemente ermöglichen es, Entitäten zu zielen, die nicht in HTML enthalten sind und Bereiche von Inhalten, die ansonsten nicht zielen können, ohne zusätzliches Markup hinzuzufügen. Betrachten Sie den Platzhalter eines <input>-Elements. Dies ist ein abstraktes Element und kein eigenes Knoten im Dokumentbaum. Sie können diesen Platzhalter durch das ::placeholder-Pseudoelement auswählen. Ein weiteres Beispiel ist das ::selection-Pseudoelement, das den Inhalt abgleicht, der derzeit von einem Benutzer hervorgehoben wird, sodass Sie das, was abgeglichen wird, stilisieren können, während der Benutzer mit dem Inhalt interagiert und die Auswahl ändert. Ebenso zielt das ::first-line-Pseudoelement auf die erste Zeile eines Elements und aktualisiert sich automatisch, wenn sich die Zeichenanzahl 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 Sub-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 Schnittstelle
  • CSSPseudoElement.element Eigenschaft
  • CSSPseudoElement.type Eigenschaft

Begriffe

• Pseudoelement Glossareintrag

Leitfäden

CSS-Pseudoelemente

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

Lernen: Pseudo-Klassen und Pseudoelemente

Teil des CSS-Bausteinabschnitts über Selektoren. Dieser Artikel definiert, was ein Pseudoelement ist und wie es mit Pseudo-Klassen kombiniert und für das Generieren von Inhalt mit ::before- und ::after-Pseudoelementen verwendet werden kann.

Anleitung zum Erstellen von fancy Boxen mit Pseudoelementen

Beispiel zur Stilgestaltung generierter Inhalte mit ::before- und ::after-Pseudoelementen für visuelle Effekte.

Verwandte Konzepte

• ::backdrop

• Web Video Text Track Format (WebVTT) Cues:

  • ::cue
  • ::cue()

• CSS Multi-Spalten-Layout Modul

  • ::column

• CSS Overflow Modul

  • ::scroll-button()
  • ::scroll-marker
  • ::scroll-marker-group
  • :target-current

• CSS Scoping Modul

  • :host
  • :host()
  • :host-context()
  • ::slotted()

• CSS Shadow Parts Modul

  • ::part

• CSS View Transitions Modul

  • ::view-transition Experimentell
  • ::view-transition-image-pair() Experimentell
  • ::view-transition-group() Experimentell
  • ::view-transition-new() Experimentell
  • ::view-transition-old() Experimentell

• CSS Selektoren

  • Attributselektoren
  • Kombinatoren
  • Klassenselektoren
  • ID-Selektoren
  • Typselektoren
  • Pseudo-Klassen
  • Universalselektoren

• placeholder Attribut des <input> Elements

• :placeholder-shown Selektor

• CSS generierter Inhalt

  • content Eigenschaft
  • quotes Eigenschaft

• Textfragmente

• AnimationEvent.pseudoElement Eigenschaft

• KeyframeEffect.pseudoElement Eigenschaft

• TransitionEvent.pseudoElement Eigenschaft

Spezifikationen

Siehe auch

• Spezifität
• CSS Selektoren Modul
• CSS Shadow-Parts Modul
• CSS generierter Inhalt Modul
• CSS positionsbasiertes Layout Modul
• CSS Custom Highlight API