CSS pseudoelement referenshandbok
- Föregående sida CSS-pseudo-klasser
- Nästa sida CSS-funktioner
CSS pseudo-element
CSS pseudo-element används för att ställa in stilen för specifika delar av ett element.
Till exempel kan det användas för:
- Ställ in stilen för den första bokstaven eller raden i ett element.
- Infoga innehåll före eller efter elementinnehållet.
- Ställ in stilen för listobjektsmarkering.
- Ställ in stilen för bakgrunds vy för dialog.
Följande tabell visar olika pseudo-element i CSS:
Pseudo-element | Exempel | Exempelbeskrivning |
---|---|---|
::after | p::after | Infoga innehåll efter innehållet i den angivna elementen. |
::backdrop | dialog::backdrop | Ställ in stilen för bakgrunds vy för dialog eller popup-element. |
::before | p::before | Infoga innehåll före innehållet i den angivna elementen. |
::file-selector-button | ::file-selector-button | Välj knappen för att välja filer av typen <input type="file">. |
::first-letter | p::first-letter | Välj första bokstaven i varje <p>-element. |
::first-line | p::first-line | Välj första raden i varje <p>-element. |
::grammar-error | ::grammar-error | Ställ in stilen för text som märks som grammatiskt fel av webbläsaren. |
::highlight() | ::highlight(custom-name) | Välj anpassad markering. |
::marker | ::marker | Markör för valda listobjekt. |
::placeholder | input::placeholder | Ställ in stilen för placeholder-texten för <input> eller <textarea> element. |
::selection | ::selection | Ställ in stilen för den text som användaren har markerat. |
::spelling-error | ::spelling-error | Ställ in stilen för text som märks som stavfel av webbläsaren. |
::view-transition | ::view-transition | Roten för vyövergångslager, som innehåller alla vyövergångar på sidan. |
::view-transition-group | ::view-transition-group | En enskild vyövergångssnappgrupp. |
::view-transition-image-pair | ::view-transition-image-pair | En behållare för att representera den "gamla" och den "nya" vytillståndet av vyer (innan och efter övergång). |
::view-transition-new | ::view-transition-new | Representerar den "nya" vytilståndet för att visa vyövergång. |
::view-transition-old | ::view-transition-old | Representerar den "gamla" vytilståndet för att visa vyövergång. |
- Föregående sida CSS-pseudo-klasser
- Nästa sida CSS-funktioner