v147 · CSS · DOM

Pseudo-element Geometry Queries

Use Element.pseudo('::before') and Element.pseudo('::after') to get live CSSPseudoElement objects, then call getBoundingClientRect() to read exact screen geometry — without any DOM wrapper tricks.

Checking Element.pseudo() support…

Hover to query pseudo-element geometry

::before (◆)

x—

y—

width—

height—

content—

font-size—

::after (→)

x—

y—

width—

height—

content—

font-size—

the API

const el = document.getElementById('target');

// Get a live CSSPseudoElement object
const before = el.pseudo('::before');
const after  = el.pseudo('::after');

// Query geometry — same as a real DOM node
const rect = before.getBoundingClientRect();
console.log(rect.x, rect.y, rect.width, rect.height);

// Read computed style
const cs = getComputedStyle(before);
console.log(cs.content, cs.fontSize);

references

implementation reference

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