A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to style the first line of a paragraph.
In contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax
selector::pseudo-element {
property: value;
}
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons (::).
Index of pseudo-elements
::after::before::cue::first-letter::first-line::selection::backdrop::placeholder::marker::spelling-error::grammar-error
| Browser | Lowest Version | Support of |
|---|---|---|
| Internet Explorer | 8.0 | :pseudo-element |
| 9.0 | :pseudo-element ::pseudo-element |
|
| Firefox (Gecko) | 1.0 (1.0) | :pseudo-element |
| 1.0 (1.5) | :pseudo-element ::pseudo-element |
|
| Opera | 4.0 | :pseudo-element |
| 7.0 | :pseudo-element ::pseudo-element |
|
| Safari (WebKit) | 1.0 (85) | :pseudo-element ::pseudo-element |