A CSS pseudo-element is a keyword added to selectors that lets you style specific parts of an element. Here is a full list of available pseudo-elements. If you want to learn more about pseudo-elements, click here.
| Selector | Example | Description | Details |
|---|---|---|---|
| ::after | a::after | Inserts something after the content of each “a” element. | Details |
| ::backdrop | video::backdrop | It creates a box that a full screen element has behind it and can be used to change the background color of the maximized screen. | Details |
| ::before | a::before | Inserts something before the content of each “a” element. | Details |
| ::cue | video::cue | This element matches Web Video Text Tracks Format (WebVTT) cues such as captions. | Details |
| ::cue-region | ::cue-region | It matches WebVTT cues within a selected element. It is used to apply styles to regions of the media element’s time line. | Details |
| ::first-letter | h3::first-letter | Selects the first letter of each “h3” element | Details |
| ::first-line | p::first-line | It applies styles to the first line of an element. | Details |
| ::file-selector-button | input::file-selector-button | It applies styles to an input button. | Details |
| ::grammar-error | p::grammar-error | It matches text that the browser has flagged as grammatically incorrect. This is mostly experimental feature and most browsers do not support it yet. | Details |
| ::marker | li::marker | It is used to style the marker of a list item. | Details |
| ::placeholder | input::placeholder | It is used to style a placeholder text of an input or textarea element. | Details |
| ::selection | p::selection | It is used to style the portion of an element that is selected/highlighted by the user. | Details |