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.
- Pseudo-element glossary term
- 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
- How to create fancy boxes using pseudo-elements
Example of styling generated content using
::afterpseudo-elements for visual effects.
- Web Video Text Tracks Format (WebVTT) cues:
- CSS scoping module
- CSS shadow parts module
- CSS selectors
placeholderattribute of the
- CSS generated content
- Text fragments
|CSS Pseudo-Elements Module Level 4 |