CSSPseudoElement — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSPseudoElement extends EventTarget

Beschreibung

Pseudoelemente wie ::before, ::after oder ::marker werden per CSS erzeugt, tauchen aber nicht als Knoten im DOM-Baum auf. Mit CSSPseudoElement gibt es für sie trotzdem ein eigenes Objekt, das auf das Pseudoelement verweist. So kann man es in Skripten gezielt ansprechen, etwa als Ziel für Animationen oder Ereignisse (das Interface erbt von EventTarget).

Einen Konstruktor gibt es nicht. Instanzen bekommt man über die Methode Element.prototype.pseudo(type), zum Beispiel mit element.pseudo('::before'). Das Interface hat folgende Mitglieder:

type (nur lesbar, string): der Selektor des Pseudoelements, z. B. "::before".
element (nur lesbar, Element): das ursprüngliche Element, zu dem das Pseudoelement gehört.
parent (nur lesbar, Element | CSSPseudoElement): das übergeordnete Objekt. Bei verschachtelten Pseudoelementen wie ::before::marker ist das ein anderes CSSPseudoElement.
pseudo(type): gibt ein verschachteltes Pseudoelement zurück, falls es eines gibt, sonst null.

In der Praxis ist das Interface noch experimentell. Wer heute Pseudoelemente mit JavaScript animieren oder untersuchen will, nutzt die breit unterstützten Alternativen: die Option pseudoElement von Element.animate() bzw. KeyframeEffect sowie getComputedStyle(element, '::before').

Rückgabewert

Typ

CSSPseudoElement

Beschreibung

Instanzen entstehen nur über Element.prototype.pseudo(type). Wird das Pseudoelement nicht unterstützt oder ist der Typ ungültig, ist der Rückgabewert null.

Beispiele

Unterstützung prüfen und ::before-Objekt holen

const badge = document.querySelector('.badge');

if (typeof badge.pseudo === 'function') {
  const before = badge.pseudo('::before');
  if (before) {
    console.log(before.type);              // Selektor des Pseudoelements
    console.log(before.element === badge); // ursprüngliches Element
  }
} else {
  console.log('CSSPseudoElement wird nicht unterstützt');
}

CSSPseudoElement wird nicht unterstützt // oder, mit aktivierter Unterstützung: // ::before // true

Pseudoelement animieren – mit sicherem Fallback

const button = document.querySelector('.cta');

const keyframes = [
  { transform: 'scale(1)', opacity: 1 },
  { transform: 'scale(1.4)', opacity: 0 }
];
const timing = { duration: 600, iterations: Infinity };

// Breit unterstützter Weg: Option pseudoElement von Element.animate()
const animation = button.animate(keyframes, { ...timing, pseudoElement: '::after' });

console.log(animation.effect.pseudoElement);

::after

Styles eines Pseudoelements auslesen

const quote = document.querySelector('blockquote');

// Funktioniert in allen Browsern, auch ohne CSSPseudoElement
const styles = getComputedStyle(quote, '::before');
console.log(styles.content);

// Mit CSSPseudoElement (experimentell): Beziehung zum Elternobjekt prüfen
const pseudo = quote.pseudo?.('::before');
if (pseudo) {
  console.log(pseudo.parent === quote);
}

"„"

// Wichtig · Fallstricke

Kompatibilität: CSSPseudoElement und Element.prototype.pseudo() sind experimentell. Sie waren bisher nur hinter Flags verfügbar, etwa in Firefox über dom.css_pseudo_element.enabled. In produktivem Code immer zuerst prüfen, ob die Funktion existiert (z. B. mit typeof el.pseudo === 'function' oder mit optionaler Verkettung el.pseudo?.()), und eine Alternative vorsehen.

Es gibt keinen öffentlichen Konstruktor. new CSSPseudoElement() wirft einen TypeError.
Pseudoelemente sind keine DOM-Knoten. querySelector('::before') findet sie nicht, und sie kommen weder in children noch in childNodes vor.
Ein ::before oder ::after wird nur angezeigt, wenn eine content-Eigenschaft gesetzt ist. Ob pseudo() für nicht angezeigte Pseudoelemente trotzdem ein Objekt liefert, hängt von der Implementierung ab.
Als Alternative zum Animieren taugen Element.animate(..., { pseudoElement }) und KeyframeEffect.pseudoElement, zum Auslesen getComputedStyle(el, '::before'). Beide sind in allen modernen Browsern verfügbar.

Siehe auch

Element.prototype.pseudo() Element.prototype.animate() Element SVGSetElement HTMLAudioElement