CSSPseudoElement

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CSSPseudoElement interface represents a pseudo-element that may be the target of an event or animated using the Web Animations API. Instances of this interface may be obtained by calling Element.pseudo().

Properties

CSSPseudoElement.element Read only: Returns the originating/parent Element of the pseudo-element.
CSSPseudoElement.type Read only: Returns the pseudo-element selector as a CSSOMString.

Methods

CSSPseudoElement extends EventTarget, so it inherits the following methods:

EventTarget.addEventListener(): Registers an event handler of a specific event type on the pseudo-element.
EventTarget.dispatchEvent(): Dispatches an event to this pseudo-element.
EventTarget.removeEventListener(): Removes an event listener from the pseudo-element.

Examples

Basic example using Element.pseudo

Using pseudo-elements, most modern browsers will automatically add quotation marks around text inside a <q> element. (A style rule may be needed to add quotation marks in older browsers.) The example below demonstrates the basic properties of the CSSPseudoElement object representing the opening quotation mark.

const element = document.querySelector('q');
const cssPseudoElement = element.pseudo('::before');
console.log(cssPseudoElement.element); // Outputs [object HTMLQuoteElement]
console.log(cssPseudoElement.type); // Outputs '::before'

Specifications

Specification
CSS Pseudo-Elements Module Level 4 (CSS Pseudo-Elements 4) # CSSPseudoElement-interface

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`CSSPseudoElement`	No	No	75 63-75	No	No	No	No	No	63-79	No	No	No
`element`	No	No	75 67-75 63-67	No	No	No	No	No	67-79 63-67	No	No	No
`type`	No	No	75 63-75	No	No	No	No	No	63-79	No	No	No