v147 · CSS · demo

Pseudo-element Click Lab

Click anywhere on the cards below — including the ::before and ::after decorations. The event log shows whether event.pseudoTarget returned a CSSPseudoElement or null.

⟳ Checking support…
::before star badge
Card A
::before arrow
Card B
::after arrow text
Card C
::before underline bar
Card D
::after corner tag
Card E
Click log
Click a card or its decoration to see events here.
// Chrome 147 — pseudoTarget on click events
document.querySelectorAll('.click-target').forEach(el => {
  el.addEventListener('click', event => {
    const pseudo = event.pseudoTarget; // CSSPseudoElement | null

    if (pseudo) {
      console.log('Clicked pseudo-element:', pseudo.type);
      // pseudo.type: '::before', '::after', '::marker', etc.
    } else {
      console.log('Clicked element itself:', event.target.id);
    }
  });
});

see also

implementation reference

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