`::details-content` CSS pseudo-element

Baseline 2025

Neu verfügbar

Seit September 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Das ::details-content CSS Pseudoelement repräsentiert den erweiterbaren/zusammenklappbaren Inhalt eines <details>-Elements.

Probieren Sie es aus

details[open]::details-content {
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
}

<details open>
  <summary>Example summary</summary>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>
    Architecto cupiditate ea optio modi quas sequi, esse libero asperiores
    debitis eveniet commodi hic ad.
  </p>
</details>

Syntax

css

selector::details-content

Beispiele

Einfaches Beispiel

Dieses Beispiel demonstriert die grundlegende Verwendung des Pseudoelements ::details-content, um den Inhalt eines <details>-Elements zu stylen.

HTML

Unser <details>-Element enthält ein <summary>-Element, dessen Inhalte immer sichtbar sein werden. Der Detailinhalt enthält ein <p>-Element.

html

<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
</details>

CSS

Wir setzen eine background-color auf das Pseudoelement ::details-content:

css

details::details-content {
  background-color: #a29bfe;
}

Ergebnis

Klicken Sie auf die Zusammenfassung, um die Detailinhalte anzuzeigen.

In diesem Beispiel wird das Pseudoelement ::details-content verwendet, um einen Übergang auf den Inhalt des <details>-Elements zu setzen, sodass es sanft eingeblendet wird, wenn es erweitert wird, und wieder ausblendet, wenn es zusammengeklappt wird.

HTML

Das HTML ist dasselbe wie im vorherigen Beispiel.

html

<details>
  <summary>Click me</summary>
  <p>Here is some content</p>
</details>

CSS

Um unseren Übergang zu erreichen, spezifizieren wir zwei separate Übergänge innerhalb der transition Kurzform-Eigenschaft:

Der opacity-Eigenschaft wird ein einfacher Übergang über 600ms zugewiesen, um den Ein-/Ausblendeffekt zu erzeugen.
Der content-visibility-Eigenschaft (die zwischen hidden und visible umgeschaltet wird, wenn der <details>-Inhalt erweitert/eingeklappt wird) wird ein 600ms Übergang mit dem transition-behavior-Wert allow-discrete zugewiesen. Dies erlaubt es dem Browser, einen Übergang auf content-visibility zu starten, dessen Animationsverhalten diskret ist. Der Effekt ist, dass der Inhalt für die gesamte Dauer des Übergangs sichtbar ist, wodurch andere Übergänge zu sehen sind. Wenn dieser Übergang nicht enthalten wäre, würde der Inhalt sofort verschwinden, wenn der <details>-Inhalt eingeklappt wird — Sie würden das sanfte Ausblenden nicht sehen.

css

details::details-content {
  opacity: 0;
  transition:
    opacity 600ms,
    content-visibility 600ms allow-discrete;
}

details[open]::details-content {
  opacity: 1;
}