CSS-Pseudo-Element-Referenzhandbuch

CSS-Pseudo-Elemente

CSS-Pseudo-Elemente werden verwendet, um den Stil eines bestimmten Teils des Elements zu setzen.

Zum Beispiel kann es verwendet werden:

  • Stellt den Stil für den ersten Buchstaben oder die erste Zeile des Elements ein
  • Fügt Inhalt vor oder nach dem Inhalt des Elements ein
  • Stellt den Stil für die Liste der Markierungen ein
  • Stellt den Stil für die Hintergrundansicht des Dialogs ein

Die folgende Tabelle zeigt verschiedene Pseudo-Elemente in CSS an:

Pseudo-Element Beispiel Beispielbeschreibung
::after p::after Fügt Inhalt nach dem Inhalt des angegebenen Elements ein.
::backdrop dialog::backdrop Stellt den Stil für die Hintergrundansicht des Dialogs oder des Pop-up-Elements ein.
::before p::before Fügt Inhalt vor dem Inhalt des angegebenen Elements ein.
::file-selector-button ::file-selector-button Wählt den Button für <input type="file">.
::first-letter p::first-letter Wählt die erste Buchstabe jedes <p>-Elements.
::first-line p::first-line Wählt die erste Zeile jedes <p>-Elements.
::grammar-error ::grammar-error Stellt den Textstil für von der Browsermarke als grammatikalisch falsch markierte Texte ein.
::highlight() ::highlight(custom-name) Wählt eine benutzerdefinierte Hervorhebung.
::marker ::marker Markiert den Auswahlpunkt der Liste.
::placeholder input::placeholder Stellt den Stil für den Platzhaltertext der <input>- oder <textarea>-Elemente ein.
::selection ::selection Stellt den Stil für den ausgewählten Text des Benutzers ein.
::spelling-error ::spelling-error Stellt den Textstil für von der Browsermarke als fehlerhaft markierte Texte ein.
::view-transition ::view-transition Stellt den Wurzelübergangsschichten der Ansichtsumschaltung dar, der alle Ansichtsumschaltungen auf der Seite enthält.
::view-transition-group ::view-transition-group Stellt eine Gruppe von Einzelaufnahmen der Ansichtsumschaltungen dar.
::view-transition-image-pair ::view-transition-image-pair Der Behälter für den „alten“ und „neuen“ Zustand der Ansicht der View-Übergänge (vor und nach dem Übergang).
::view-transition-new ::view-transition-new Der "neue" Zustand der Ansicht für den Übergang der Ansicht darzustellen.
::view-transition-old ::view-transition-old Der "alte" Zustand der Ansicht für den Übergang der Ansicht darzustellen.