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
::after
::before
::file-selector-button
::first-letter
::first-line
::grammar-error
::highlight()
::marker
::placeholder
::selection
::spelling-error
::target-text
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
CSSPseudoElement
interfaceCSSPseudoElement.element
propertyCSSPseudoElement.type
property
Terms
- Pseudo-element glossary term
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.
Related concepts
::backdrop
-
Web Video Text Tracks Format (WebVTT) cues:
-
CSS scoping module
-
CSS shadow parts module
-
CSS view transitions module
::view-transition
Experimental::view-transition-image-pair()
Experimental::view-transition-group()
Experimental::view-transition-new()
Experimental::view-transition-old()
Experimental
-
placeholder
attribute of the<input>
element -
:placeholder-shown
selector -
AnimationEvent.pseudoElement
property -
KeyframeEffect.pseudoElement
property -
TransitionEvent.pseudoElement
property
Specifications
Specification |
---|
CSS Pseudo-Elements Module Level 4 |
See also
- Specificity
- CSS selectors module
- CSS shadow-parts module
- CSS generated content module
- CSS positioned layout module
- CSS custom highlight API