v147 · CSS · JavaScript · demo

Style Mutation Probe

Hover over and click the cards — a live polling loop reads getComputedStyle() on the ::before and ::after pseudo-elements via Element.pseudo(), showing exactly which CSS properties change during transitions without any JavaScript modifying the styles directly.

Chrome 147+ — Element.pseudo('::before') / Element.pseudo('::after'). In older browsers the polling falls back to reading computed styles on the parent element, missing pseudo-element-specific properties.

Hover the cards to animate ::before and ::after · click to toggle active state · the probe polls live pseudo-element styles at 10 Hz

Card A
Card B
Card C
10 Hz — reads getComputedStyle on ::before and ::after every 100ms
Live pseudo-element computed styles — selected: card-a
::before
::after
Starting poll…
// Read computed styles from a ::before pseudo-element — Chrome 147+
const el = document.querySelector('.card');
const before = el.pseudo('::before');   // CSSPseudoElement

if (before) {
  const style = getComputedStyle(before);
  console.log(style.getPropertyValue('background-color'));
  console.log(style.getPropertyValue('transform'));
  // Works for any CSS property, including ones changed by :hover / :active
}

// Older browsers: no way to reach pseudo-element computed styles from JS
// getComputedStyle(el) only gives you the element, not its pseudos

see also

implementation reference

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