v147 · shipped · dom · css · covered on mdn
CSSPseudoElement interface
Chrome 147 ships the CSSPseudoElement interface and Element.pseudo(type) method, giving JavaScript a standard way to obtain a proxy object representing a pseudo-element (::before, ::after, ::marker) on a DOM element — enabling geometry queries, Web Animations, and event interop with pseudo-elements.
this feature is documented on MDN
MDN: CSSPseudoElement — Web APIs
MDN covers the full CSSPseudoElement interface including its properties (type, element, parent), Element.pseudo(), browser compatibility, and spec references. gendn doesn't duplicate that here.
quick reference
| New method | Element.pseudo(type) |
|---|---|
| Returns | CSSPseudoElement (a proxy for the pseudo-element) or null |
| Supported types | ::before, ::after, ::marker |
| Key properties | .type (string), .element (originating Element), .parent |
| Shipped in | Chrome 147 (desktop, Android, WebView) |
| ChromeStatus | 5194399398756352 — CSSPseudoElement interface |
| Spec | CSS Pseudo-Elements Level 4 |
example
const el = document.querySelector('.card');
// Get the ::before pseudo-element proxy
const before = el.pseudo('::before');
if (before) {
console.log(before.type); // "::before"
console.log(before.element); // the .card element
// Use with Web Animations API
before.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 300 }
);
}