CSS - Pseudo-elements
Just like 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 ::first-line pseudo-element targets only the first line of an element specified by the selector.
Syntax
selector::pseudo-element { property: value; }
Description
Just like 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 ::first-line pseudo-element targets only the first line of an element specified by the selector.
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.
::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 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/pseudo-elements