CSS Pseudo-element Reference Manual

CSS pseudo-elementen

CSS pseudo-elementen worden gebruikt om de stijl van specifieke delen van een element in te stellen.

Bijvoorbeeld, het kan worden gebruikt voor:

  • Stel de stijl van de eerste letter of de eerste regel van een element in
  • Voeg inhoud in voor of na de inhoud van een element
  • Stel de stijl van de lijstitem markering in
  • Stel de stijl van de achtergrondweergave van het dialoogvenster in

De tabel hieronder toont de verschillende pseudo-elementen in CSS:

Pseudo-element Voorbeeld Voorbeeldbeschrijving
::after p::after Voeg inhoud in na de inhoud van het gespecificeerde element.
::backdrop dialog::backdrop Stel de stijl van de achtergrondweergave van het dialoogvenster of pop-up element in.
::before p::before Voeg inhoud in voor de inhoud van het gespecificeerde element.
::file-selector-button ::file-selector-button Selecteer de knop van het <input type="file"> element.
::first-letter p::first-letter Selecteer de eerste letter van elk <p> element.
::first-line p::first-line Selecteer de eerste regel van elk <p> element.
::grammar-error ::grammar-error Stel de stijl van de tekst die de browser als syntaxisfout markeert in.
::highlight() ::highlight(custom-name) Selecteer een aangepaste highlight.
::marker ::marker Selecteer het markeraanduiding van een lijstitem.
::placeholder input::placeholder Stel de stijl van de placeholder tekst van een <input> of <textarea> element in.
::selection ::selection Stel de stijl van de geselecteerde tekst door de gebruiker in.
::spelling-error ::spelling-error Stel de stijl van de tekst die de browser als foutief gespeld markeert in.
::view-transition ::view-transition De wortel van de view-transition-overlapping laag, die alle view-transities op de pagina bevat.
::view-transition-group ::view-transition-group Een snapshotgroep van een enkele view-transition.
::view-transition-image-pair ::view-transition-image-pair Een container voor de 'oude' en 'nieuwe' weergavestaten van het view-transition (voor en na de overgang).
::view-transition-new ::view-transition-new Weergavestatus 'nieuw' die de overgang van de weergave vertegenwoordigt.
::view-transition-old ::view-transition-old Weergavestatus 'oud' die de overgang van de weergave vertegenwoordigt.