Pseudo target on events

at a glance

Status and specification divergence, both sides reported rather than resolved (fetched 2026-10-06): this page records the property as Enabled by default in Chrome 147, while ChromeStatus feature 5179328935624704 reads status “Proposed” with is_released false and no intent stage. On the specification side, this page names css-pseudo-4, but the record’s own spec link points at a UI Events pull request, and the fetched css-pseudo-4 contains no occurrence of pseudoTarget, UIEvent, AnimationEvent or TransitionEvent — it defines only the CSSPseudoElement interface this property returns, which MDN likewise documents without naming the property. The page is also inconsistent with itself about which events carry it: the lede names UIEvent, AnimationEvent and TransitionEvent while the at-a-glance row says Event.pseudoTarget.

why it exists

CSS pseudo-elements like ::before and ::after generate rendered content and are fully interactive — they receive pointer events, fire animation events, and participate in transitions. Before Chrome 147, Event.target always referred to the originating DOM element, with no way to tell programmatically that the interaction happened on a pseudo-element rather than the element itself. Developers resorted to geometry calculations or layout mirrors to infer the hit. pseudoTarget closes this gap directly in the event object.

shape of the API

The pseudoTarget property

Every UIEvent, AnimationEvent, and TransitionEvent now carries a pseudoTarget property:

• If the event was dispatched on a pseudo-element, pseudoTarget is a CSSPseudoElement whose type is the pseudo-element selector (e.g. "::before") and whose element is the originating DOM element.
• If the event was not dispatched on a pseudo-element, pseudoTarget is null.
• Event.target remains the originating DOM element in both cases — existing code is unaffected.

Supported event types

Note: mouseover, mouseout, mouseenter, mouseleave, and their pointer* hover counterparts are not yet supported.

example

Detecting a click on ::after

const box = document.querySelector('.box');

box.addEventListener('click', (event) => {
  if (event.pseudoTarget !== null) {
    console.log('Clicked on pseudo-element:', event.pseudoTarget.type);
    // e.g. "::after"
    console.log('Originating element:', event.pseudoTarget.element);
  } else {
    console.log('Clicked on the element itself');
  }
});

Reacting to a transition on ::before

document.addEventListener('transitionend', (event) => {
  if (event.pseudoTarget?.type === '::before') {
    // A ::before pseudo-element finished its CSS transition
    const host = event.pseudoTarget.element;
    host.classList.remove('transitioning');
  }
});

browser support

see also

• MDN: CSSPseudoElement
• CSS Pseudo-Elements Level 4 specification
• chromestatus — Pseudo target on events (5179328935624704)