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.

Reference

Selectors

The specification also defines the ::details-content and ::search-text pseudo-elements and the ::postfix and ::prefix sub-pseudo elements. These are not yet supported by any browser. The ::highlight() pseudo-element is included within this module, but most details are provided in the CSS custom highlight API.

Interfaces

Terms

Guides

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.

Specifications

Specification
CSS Pseudo-Elements Module Level 4

See also