ContextQMD
Back to Content

CSS pseudo-elements

files/en-us/web/css/guides/pseudo-elements/index.md

latest6.1 KB
Original Source

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.

[!NOTE] This page introduces a CSS module. To find an exhaustive list of all pseudo-elements defined by CSS specifications, see the pseudo-elements reference page.

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

The specification also defines the ::details-content pseudo-element 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

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

  • Web Video Text Tracks Format (WebVTT) cues:

    • {{cssxref("::cue")}}
    • {{cssxref("::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()")}}
    • {{cssxref(":host-context()")}}
    • {{cssxref("::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

  • placeholder attribute of the <input> element

  • {{cssxref(":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