v147 · Events · CSS Pseudo-elements

Pseudo-element Event Tree Explorer

Click on elements that have ::before, ::after, or ::marker pseudo-elements. Chrome 147 sets event.pseudoTarget to the CSSPseudoElement when a click originates from a pseudo-element — instead of null.

Checking pseudoTarget support…

Click anywhere on each card — including the ★ (::before) and ◆ (::after) decorators — and watch the event inspector below.

Before element

After element

Marker element

Last event

type—

target—

target.id—

pseudoTarget—

pseudoTarget.type—

Event counts

from ::before0

from ::after0

from ::marker0

from element body0

pseudoTarget null0

reading pseudoTarget

element.addEventListener('click', e => {
  if (e.pseudoTarget) {
    // Click came from a pseudo-element
    console.log(e.pseudoTarget.type);      // e.g. "::before"
    console.log(e.pseudoTarget.element);   // the originating element
    console.log(e.target);                 // the real DOM element
  } else {
    // Click on the element body itself
    console.log('element click, no pseudo');
  }
});

references

implementation reference

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