CSS pseudo-elements

The CSS pseudo-element module defines abstract elements that are not directly present in the document tree. These abstract elements, called pseudo-elements, represent portions of the render tree that can be selected and styled. Pseudo-elements are used to create abstractions about the document tree beyond those provided by the document tree.

Pseudo-elements are prefixed with a double colon (::). You add pseudo-elements to selectors (as in p::first-line) to target and style these faux elements.

Pseudo-elements enable targeting entities not included in HTML and sections of content that cannot be targeted otherwise without adding extra markup. Consider the placeholder of an <input> element. This is an abstract element and not a distinct node in the document tree. You can select this placeholder by using the ::placeholder pseudo-element. As another example, the ::selection pseudo-element matches the content currently highlighted by a user, allowing you to style what is matched as the user interacts with the content and changes the selection. Similarly, the ::first-line pseudo-element targets the first line of an element, updating automatically if the character count of the first line changes, without having to query the element's line length.