v147 · Demo 1

Pseudo-element Inspector

Click an element, pick a pseudo-type, and see its geometry and computed styles via element.pseudo('::before').getBoundingClientRect().

⚠ Element.prototype.pseudo() is not available in this browser. Requires Chrome 147+.
1. Click an element to select it:
Box A
Box B
  • List item
2. Choose pseudo-type:
CSSPseudoElement result
Select an element above and click Inspect.

how it works

const el = document.getElementById('my-element');

// Get a CSSPseudoElement proxy
const pseudo = el.pseudo('::before');
// pseudo is always non-null (even if the element has no ::before style)

// Geometry — same API as regular elements
const rect = pseudo.getBoundingClientRect();
console.log(rect.width, rect.height, rect.top, rect.left);

// Computed styles
const style = getComputedStyle(pseudo);
console.log(style.content, style.color, style.fontSize);

// Type introspection
console.log(pseudo.type); // "::before"
console.log(pseudo.element); // the originating element

see also

implementation reference

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