Web/API/CSSPseudoElement

This is an experimental technologyCheck 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	Status	Comment
CSS Pseudo-Elements Level 4The definition of 'CSSPseudoElement' in that specification.	Working Draft	Initial definition.

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
CSSPseudoElement Experimental'	Chrome No support No	Edge No support No	Firefox Full support 75 Disabled' Full support 75 Disabled' Disabled' From version 75: this feature is behind the dom.css_pseudo_element.enabled preference. To change preferences in Firefox, visit about:config. No support 63 — 75 Disabled' Disabled' From version 63 until version 75 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 47 — 63 Disabled' Disabled' From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 63 Disabled' Full support 63 Disabled' Disabled' From version 63: this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 47 — 63 Disabled' Disabled' From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
element Experimental'	Chrome No support No	Edge No support No	Firefox Full support 75 Disabled' Full support 75 Disabled' Disabled' From version 75: this feature is behind the dom.css_pseudo_element.enabled preference. To change preferences in Firefox, visit about:config. No support 67 — 75 Disabled' Disabled' From version 67 until version 75 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 63 — 67 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: parentElement Disabled' From version 63 until version 67 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 47 — 63 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: parentElement Disabled' From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 67 Disabled' Full support 67 Disabled' Disabled' From version 67: this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 63 — 67 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: parentElement Disabled' From version 63 until version 67 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 47 — 63 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: parentElement Disabled' From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
type Experimental'	Chrome No support No	Edge No support No	Firefox Full support 75 Disabled' Full support 75 Disabled' Disabled' From version 75: this feature is behind the dom.css_pseudo_element.enabled preference. To change preferences in Firefox, visit about:config. No support 63 — 75 Disabled' Disabled' From version 63 until version 75 (exclusive): this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 47 — 63 Disabled' Disabled' From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 63 Disabled' Full support 63 Disabled' Disabled' From version 63: this feature is behind the dom.animations-api.getAnimations.enabled preference. To change preferences in Firefox, visit about:config. No support 47 — 63 Disabled' Disabled' From version 47 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

Experimental. Expect behavior to change in the future.'

Experimental. Expect behavior to change in the future.

User must explicitly enable this feature.'

User must explicitly enable this feature.

Uses a non-standard name.'

Uses a non-standard name.

See also

• Element.pseudo()
• Web Animations API
• Element.animate()

CSSPseudoElement by Mozilla Contributors is licensed under CC-BY-SA 2.5.