CSS pseudo-element referencedokumentation

CSS pseudo-elementer

CSS pseudo-elementer bruges til at sætte stilen på specifikke dele af elementer.

For eksempel kan det bruges til:

  • Indstil stilen for elementets første bogstav eller første linje
  • Indsæt indhold før eller efter elementets indhold
  • Indstil stilen for listeemne-markøren
  • Indstil stilen for dialogens baggrundsvisning

Følgende tabel viser de forskellige pseudo-elementer i CSS:

Pseudo-element Eksempel Eksempelbeskrivelse
::after p::after Indsæt indhold efter indholdet i den angivne element.
::backdrop dialog::backdrop Indstil stilen for baggrundsvisningen af dialog eller pop-up elementets baggrund.
::before p::before Indsæt indhold før indholdet i den angivne element.
::file-selector-button ::file-selector-button Vælg knappen for <input type="file">.
::first-letter p::first-letter Vælg den første bogstav i hvert <p> element.
::first-line p::first-line Vælg den første linje i hvert <p> element.
::grammar-error ::grammar-error Indstil stilen for tekst, der markeres som syntaksfejl af browseren.
::highlight() ::highlight(custom-name) Vælg brugerdefineret fremhævelse.
::marker ::marker Vælg markøren for listeemner.
::placeholder input::placeholder Indstil stilen for placeholder-tekst i <input> eller <textarea> elementer.
::selection ::selection Indstil stilen for tekst, der er markeret som udvalgt af brugeren.
::spelling-error ::spelling-error Indstil stilen for tekst, der markeres som stavningsfejl af browseren.
::view-transition ::view-transition Repræsenterer roden af visningsovergangsoverlægget, som indeholder alle visningsovergange på siden.
::view-transition-group ::view-transition-group Repræsenterer en enkelt visningsovergangs snapshotgruppe.
::view-transition-image-pair ::view-transition-image-pair Repræsenterer beholderen for 'gamle' og 'nye' visningsstater for visningsovergange (før og efter overgangen).
::view-transition-new ::view-transition-new Repræsenterer den 'nye' visningsstatus for visningsovergange.
::view-transition-old ::view-transition-old Repræsenterer den 'gamle' visningsstatus for visningsovergange.