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.






CSS pseudo-elements

Alphabetical list of pseudo-elements defined by all the CSS specifications and WebVTT.

Building blocks: Pseudo-classes and pseudo-elements

Part of CSS building blocks section on selectors. This article defines what a pseudo-element is and how it can be combined with pseudo-classes and be used for generating content with ::before and ::after pseudo-elements.

How to create fancy boxes using pseudo-elements

Example of styling generated content using ::before and ::after pseudo-elements for visual effects.


CSS Pseudo-Elements Module Level 4

See also