demo · v147 · CSS · DOM

Pseudo-Element Explorer

Inspect computed styles, test Element.prototype.pseudo() support, and live-edit pseudo-element properties for ::marker, ::before, ::after, and ::backdrop. The probes distinguish supported CSSPseudoElement handles from pseudos that remain computed-style-only.

Select a pseudo-element type in the toolbar. The inspector panel reads its computed styles via getComputedStyle(el, '::pseudo-name') and probes whether Element.prototype.pseudo() is available (Chrome 147+), but each pseudo type still needs its own runtime probe. The style editor on the right changes the pseudo-element's appearance live.

Live demo elements

Dialog

Click the backdrop or the button below to close. The ::backdrop pseudo-element is the dark overlay behind this dialog.
  • First item (::marker)
  • Second item (::marker)
  • Third item (::marker)

Text with ::before and ::after decorators

API support probes

Computed styles (::marker)

PropertyComputed Value

Live style editor (::marker)

Adjust properties to see the selected pseudo-element update:

0.5

color (via CSS custom prop or class)

1em

Generated CSS

--

how it works

// Chrome 147+: get a supported CSSPseudoElement handle
const item = document.querySelector('li');
const marker = item.pseudo('::marker');
// marker is a CSSPseudoElement when this pseudo type is exposed

// Read computed styles on any pseudo (works across browsers)
const styles = getComputedStyle(element, '::marker');
console.log(styles.color, styles.fontSize);

// Feature detect each pseudo, not just the method
const backdrop = dialog.pseudo?.('::backdrop');
// In current Chrome this may return null or throw.

see also

implementation reference

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