KeyframeEffect: pseudoElement property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Learn more
See full compatibility

The pseudoElement property of a KeyframeEffect interface is a string representing the pseudo-element being animated. It may be null for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

Note: If set to the legacy single-colon syntax of :before, :after, :first-letter, or :first-line, the string is transformed into its double-colon modern version (::before, ::after, ::first-letter, and ::first-line, respectively).

Value

A string or null.

Exceptions

SyntaxError DOMException: Thrown when trying to set this property to an element, an invalid pseudo-element (either non-existent or misspelled). The property is then left unchanged.

Examples

html

<div id="text">Some text</div>
<pre id="log"></pre>

css

#text::after {
 content: "👹";
 display: inline-block; /* Needed as the `transform` property does not apply to inline elements */
 font-size: 2rem;
}
#text::before {
 content: "🤠";
 display: inline-block;
 font-size: 2rem;
}

const log = document.getElementById("log");
const text = document.getElementById("text");
// Create the keyframe and launch the animation
const animation = text.animate([{ transform: "rotate(360deg)" }], {
 duration: 3000,
 iterations: Infinity,
 pseudoElement: "::after",
});
// Get the value of KeyframeEffect.pseudoElement
function logPseudoElement() {
 const keyframeEffect = animation.effect;
 log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
 requestAnimationFrame(logPseudoElement);
}
// Every 6 seconds, switch the pseudo-element animated
function switchPseudoElement() {
 const keyframeEffect = animation.effect;
 keyframeEffect.pseudoElement =
 keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
 setTimeout(switchPseudoElement, 6000);
}
switchPseudoElement();
logPseudoElement();

[フレーム]