Skip to main content

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 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("::marker")}}
  • {{CSSXref("::placeholder")}}
  • {{CSSXref("::selection")}}
  • {{CSSXref("::spelling-error")}}
  • {{CSSXref("::target-text")}}

Interfaces​

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

Terms​

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

Guides​

Specifications​

See also​