v147 · CSS · JavaScript

CSSPseudoElement interface

Element.pseudo('::before') returns a live CSSPseudoElement object, letting JavaScript inspect and measure pseudo-elements like real DOM nodes — geometry queries, computed styles, and event attribution included.

concepts

  1. Pseudo-element Inspector

    Pick an element and a pseudo-type (::before, ::after, ::marker). Calls getBoundingClientRect() and getComputedStyle() on the returned CSSPseudoElement and displays the live values.

    Live API CSSPseudoElement CSSOM

  2. PseudoTarget Events

    Hover over elements to trigger CSS transitions on their ::before pseudo-elements. The new event.pseudoTarget property on TransitionEvent tells you exactly which pseudo-element fired the event — no more guessing.

    Live API pseudoTarget TransitionEvent

  3. Pseudo-element Geometry Queries

    Calls Element.pseudo('::before').getBoundingClientRect() and draws canvas overlays showing the exact pixel geometry of ::before and ::after decorators — demonstrating the geometry API that was impossible before CSSPseudoElement.

  4. Style Mutation Probe

    A live polling probe that reads getComputedStyle() on ::before and ::after pseudo-elements at 10 Hz via Element.pseudo(). Hover and click the cards to trigger CSS transitions — watch exactly which properties change in the probe panel, without any JavaScript modifying the styles directly.

  5. Compatibility Lab

    Probes Element.pseudo(), CSSPseudoElement.getBoundingClientRect(), and event.pseudoTarget via feature detection. Runs a live getComputedStyle() call on a ::before pseudo-element to confirm the API works. Provides the polyfill fallback for non-supporting browsers.

why it shipped

Pseudo-elements like ::before and ::after have always been invisible to JavaScript. You couldn't query their geometry, read their computed styles, or know when a CSS animation fired on one. Workarounds involved creating real DOM nodes instead of pseudo-elements, or reading getComputedStyle(el, '::before') and manually parsing the content. The CSSPseudoElement interface closes this gap: element.pseudo('::before') returns a proxy object that supports getBoundingClientRect(), getComputedStyle(), and serves as the pseudoTarget on animation and transition events. The same interface also ships in Firefox, making this an interoperability milestone.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗