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 {{HTMLelement("input")}}  element. This is an abstract element and not a distinct node in the document tree. You can select this placeholder by using the {{CSSXref("::placeholder")}}  pseudo-element. As another example, the {{CSSXref("::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 {{CSSXref("::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

• {{CSSXref("::after")}} 
• {{CSSXref("::before")}} 
• {{CSSXref("::file-selector-button")}} 
• {{CSSXref("::first-letter")}} 
• {{CSSXref("::first-line")}} 
• {{CSSXref("::grammar-error")}} 
• {{CSSXref("::highlight()")}} 
• {{CSSXref("::marker")}} 
• {{CSSXref("::placeholder")}} 
• {{CSSXref("::selection")}} 
• {{CSSXref("::spelling-error")}} 
• {{CSSXref("::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 {{CSSXref("::highlight()")}}  pseudo-element is included within this module, but most details are provided in the CSS custom highlight API.

Interfaces

• {{DOMxRef("CSSPseudoElement")}}  interface
  • {{DOMxRef("CSSPseudoElement.element")}}  property
  • {{DOMxRef("CSSPseudoElement.type")}}  property

Terms

• {{Glossary("Pseudo-element")}}  glossary term

Guides

• CSS pseudo-elements

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

• Learn: 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

• {{cssxref("::backdrop")}} 

• Web Video Text Tracks Format (WebVTT) cues:

  • {{cssxref("::cue")}} 
  • {{cssxref("::cue", "::cue()")}} 

• CSS multi-column layout module

  • {{cssxref("::column")}} 

• CSS overflow module

  • {{cssxref("::scroll-button()")}} 
  • {{cssxref("::scroll-marker")}} 
  • {{cssxref("::scroll-marker-group")}} 
  • {{cssxref(":target-current")}} 

• CSS scoping module

  • {{CSSXref(":host")}} 
  • {{CSSXref(":host_function", ":host()")}} 
  • {{CSSXref(":host-context", ":host-context()")}} 
  • {{CSSXref("::slotted", "::slotted()")}} 

• CSS shadow parts module

  • {{CSSXref("::part")}} 

• CSS view transitions module

  • {{cssxref("::view-transition")}}  {{Experimental_Inline}} 
  • {{cssxref("::view-transition-image-pair()")}}  {{Experimental_Inline}} 
  • {{cssxref("::view-transition-group()")}}  {{Experimental_Inline}} 
  • {{cssxref("::view-transition-new()")}}  {{Experimental_Inline}} 
  • {{cssxref("::view-transition-old()")}}  {{Experimental_Inline}} 

• CSS selectors

  • Attribute selectors
  • Combinators
  • Class selectors
  • ID selectors
  • Type selectors
  • Pseudo-classes
  • Universal selectors

• placeholder attribute of the <input> element

• :placeholder-shown selector

• CSS generated content

  • {{cssxref("content")}}  property
  • {{cssxref("quotes")}}  property

• Text fragments

• {{DOMXref("AnimationEvent.pseudoElement")}}  property

• {{DOMXref("KeyframeEffect.pseudoElement")}}  property

• {{DOMXref("TransitionEvent.pseudoElement")}}  property

Specifications

{{Specifications}} 

See also

• Specificity
• CSS selectors module
• CSS shadow-parts module
• CSS generated content module
• CSS positioned layout module
• CSS custom highlight API