Pseudo-Elemente

selector::pseudo-element {
  property: value;
}

Zum Beispiel kann ::first-line verwendet werden, um die Schriftart der ersten Zeile eines Absatzes zu ändern.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Doppelte Doppelpunkte (::) werden für Pseudo-Elemente verwendet. Dies unterscheidet Pseudo-Elemente von Pseudo-Klassen, die in ihrer Notation einen einfachen Doppelpunkt (:) verwenden. Beachten Sie, dass Browser die Syntax mit einfachem Doppelpunkt für die ursprünglichen vier Pseudo-Elemente unterstützen: ::before, ::after, ::first-line und ::first-letter.

Pseudo-Elemente existieren nicht unabhängig. Das Element, von dem ein Pseudo-Element ein Teil ist, wird als sein Ursprungselement bezeichnet. Ein Pseudo-Element muss nach allen anderen Komponenten im komplexen oder zusammengesetzten Selektor erscheinen. Das letzte Element im Selektor ist das Ursprungselement des Pseudo-Elements. Zum Beispiel können Sie die erste Zeile eines Absatzes mit p::first-line auswählen, aber nicht die Kinder der ersten Zeile. So ist p::first-line > * ungültig.

Ein Pseudo-Element kann basierend auf dem aktuellen Zustand des Ursprungselements ausgewählt werden. Zum Beispiel wählt p:hover::first-line die erste Zeile (Pseudo-Element) eines Absatzes aus, wenn der Absatz selbst gehovt wird (Pseudo-Klasse).

::first-line

Die erste Zeilenbox des Ursprungselements.

::first-letter

Der erste Buchstabe, die erste Zahl oder das erste Symbolzeichen auf der ersten Zeile seines Ursprungselements.

::cue

Die WebVTT Cues innerhalb eines ausgewählten Elements. Dies kann verwendet werden, um Untertitel und andere Cues in Medien mit VTT-Tracks zu stylen. Das CSS Pseudo-Elemente Modul definiert auch die ::postfix und ::prefix Sub-Pseudo-Elemente. Diese werden noch von keinem Browser unterstützt.

Wählt Dokumentabschnitte basierend auf Inhalt und Dokumentstatus aus und ermöglicht es, diese Bereiche unterschiedlich zu stylen, um diesen Status dem Benutzer anzuzeigen.

::selection

Der Teil eines Dokuments, der ausgewählt wurde.

::target-text

Das Ziel-Element des Dokuments. Das Ziel-Element wird durch den Fragment-Bezeichner der URL identifiziert.

::spelling-error

Ein Textabschnitt, von dem der Browser glaubt, dass er falsch geschrieben ist.

::grammar-error

Ein Textabschnitt, von dem der Browser glaubt, dass er grammatikalisch inkorrekt ist.

::highlight()

Die Elemente im Highlight-Register. Es wird verwendet, um benutzerdefinierte Hervorhebungen zu erstellen.

Diese Pseudo-Elemente verhalten sich wie reguläre Elemente und fügen sich nahtlos in das Box-Modell ein. Sie agieren als Kind-Element, das direkt innerhalb der Hierarchie des Ursprungselements gestylt werden kann.

::before

Erstellt ein Pseudo-Element, das das erste Kind des ausgewählten Elements ist.

::after

Erstellt ein Pseudo-Element, das das letzte Kind des ausgewählten Elements ist.

::column

Jedes Säulenfragment eines Mehrspaltenlayouts.

::marker

Die automatisch generierte Markierung eines Listenelements.

::backdrop

Der Hintergrund des Ursprungselements, das in der obersten Schicht gerendert wird.

::scroll-button()

Erstellt eine Schaltfläche, die das Scrollen des Scroll-Containers, auf den sie angewendet wird, steuern kann.

::scroll-marker

Erstellt ein Pseudo-Element, das eine Scroll-Markierung ist — ein Scroll-Zielknopf für sein Ursprungselement, das in einer Scroll-Markierungsgruppe verschachtelt ist.

::scroll-marker-group

Generiert einen Container vor oder nach einem Scroll-Container, um die ::scroll-marker Pseudo-Elemente zu enthalten, die auf dem Element oder seinen Nachkommen generiert werden.

Diese Pseudo-Elemente sind reale Elemente, die anderweitig nicht auswählbar sind.

::details-content

Der erweiterbare/zusammenklappbare Inhalt eines <details> Elements.

::part()

Jedes Element innerhalb eines Schattenbaums, das ein übereinstimmendes part Attribut hat.

::slotted()

Jedes Element, das in einen Slot in einer HTML-Vorlage platziert wird.

Die Pseudo-Elemente beziehen sich auf Formularelemente.

::checkmark

Zielt auf das Häkchen ab, das in das aktuell ausgewählte <option> Element eines anpassbaren Auswahl-Elements eingefügt wird, um eine visuelle Anzeige zu bieten, welches ausgewählt ist.

::file-selector-button

Die Schaltfläche eines <input> vom type="file".

::picker()

Der Auswahlteil eines Elements, zum Beispiel der Dropdown-Auswahlknopf eines anpassbaren Auswahl-Elements.

::picker-icon

Das Auswahl-Icon innerhalb von Formularelementen, die ein mit ihnen verbundenes Icon haben. Im Fall eines anpassbaren Auswahl-Elements wählt es den Pfeil aus, der nach unten zeigt, wenn die Auswahl geschlossen ist.

::placeholder

Der Platzhaltertext in einem Eingabefeld.

Durch eine Reihe von CSS-Spezifikationen definierte Pseudo-Elemente umfassen folgende:

A

• ::after

B

• ::backdrop
• ::before

C

• ::column
• ::checkmark
• ::cue (und ::cue())

D

• ::details-content

F

• ::file-selector-button
• ::first-letter
• ::first-line

G

• ::grammar-error

H

• ::highlight()

M

• ::marker

P

• ::part()
• ::picker()
• ::picker-icon
• ::placeholder

S

• ::scroll-button()
• ::scroll-marker
• ::scroll-marker-group
• ::selection
• ::slotted()
• ::spelling-error

T

• ::target-text

V

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

Sie können einige Pseudo-Element-Selektoren zusammenketten, um verschachtelte Pseudo-Elemente innerhalb anderer Pseudo-Elemente zu stylen. Die folgenden verschachtelten Pseudo-Element-Kombinationen werden unterstützt:

• ::after
  • ::after::marker: Wählt das ::marker Pseudo-Element eines ::after Pseudo-Elements aus, wenn ::after als Listenelement mit display: list-item gestylt ist.
• ::before
  • ::before::marker: Wählt das ::marker Pseudo-Element eines ::before Pseudo-Elements aus, wenn ::before als Listenelement mit display: list-item gestylt ist.

Schauen Sie sich die einzelnen Pseudo-Element-Referenzseiten für Beispiele und Informationen zur Browser-Kompatibilität an.

• CSS Pseudo-Element Modul
• Pseudo-Klassen
• CSS Selektoren Modul
• Lernen: Pseudo-Klassen und Pseudo-Elemente