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
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
- CSS selectors
placeholder
attribute of the<input>
element:placeholder-shown
selector- CSS generated content
- Text fragments
AnimationEvent.pseudoElement
propertyKeyframeEffect.pseudoElement
propertyTransitionEvent.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