Pseudo-elements, just like pseudo-classes, are added to a CSS selectors but instead of describing a special state, they allow you to scope and style certain parts of an html element.
For example, the ::first-letter pseudo-element targets only the first letter of a block element specified by the selector.
|Insert content after the content of an element|
|Insert content before the content of an element|
|Selects the first letter of each element|
|Selects the first line of each element|
|Matches the portion of an element that is selected by a user|
|Used to create a backdrop that hides the underlying document for an element in the top layer's stack|
|Allows you to style the placeholder text of a form element (Experimental)|
|For applying list-style attributes on a given element (Experimental)|
|Represents a text segment which the browser has flagged as incorrectly spelled (Experimental)|
|Represents a text segment which the browser has flagged as grammatically incorrect (Experimental)|
Sometimes you will see double colons (
::) instead of just one (
:). This is a way to separate pseudo-classes from pseudo-elements, but some older browsers like Internet Explorer 8 only supports single colon (
:) for pseudo-elements.
One can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
Pseudo-elements are not a part of the DOM, therefore are not targetable by
:hover or other user events.