Pseudo target on events

at a glance

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)