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`
* `::marker`
* `::placeholder`
* `::selection`
* `::spelling-error`
* `::target-text`
### Interfaces

* `CSSPseudoElement` interface
    + `CSSPseudoElement.element` property
    + `CSSPseudoElement.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:
    + `::cue`
    + `::cue()`
    + `::cue-region`
* CSS scoping module
    + `:host`
    + `:host()`
    + `:host-context()`
    + `::slotted()`
* CSS shadow parts module
    + `::part`
* 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
    + `content` property
    + `quotes` property
* Text fragments
* `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