v147 · Demo 2

PseudoTarget Events

Hover the cards to trigger CSS transitions on their pseudo-elements. event.pseudoTarget on TransitionEvent identifies exactly which pseudo-element fired — no guessing required.

Checking pseudoTarget support…
Card 1
Bottom bar
::before transition
Card 2
Badge fade
::after transition
Card 3
Circle grow
::before transition
Transition Events (pseudoTarget)
Hover the cards above to see transition events.

how it works

// Chrome 147: TransitionEvent and AnimationEvent now have pseudoTarget
// If the transition fired on a pseudo-element, pseudoTarget is a CSSPseudoElement
// If it fired on the element itself, pseudoTarget is null

element.addEventListener('transitionstart', (event) => {
  if (event.pseudoTarget) {
    // Transition is on a pseudo-element
    console.log('Pseudo type:', event.pseudoTarget.type); // e.g. "::before"
    console.log('Property:',   event.propertyName);       // e.g. "transform"
    const rect = event.pseudoTarget.getBoundingClientRect();
    console.log('Geometry:', rect.width, rect.height);
  } else {
    // Transition is on the element itself
    console.log('Element transition:', event.propertyName);
  }
});

see also

implementation reference

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