Summary
Just like {{ Cssxref("pseudo-classes") }}, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the {{ Cssxref("::first-line") }} pseudo-element targets only the first line of an element specified by the selector.
Syntax
selector::pseudo-element { property: value; }
All pseudo-elements
- {{ Cssxref("::after") }}
- {{ Cssxref("::before") }}
- {{ Cssxref("::first-letter") }}
- {{ Cssxref("::first-line") }}
- {{ Cssxref("::selection") }}
- {{ Cssxref("::backdrop") }}
Notes
Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.
Note:
::selection
always starts with double colons (::).You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
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 |