::details-content

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

selector::details-content

Beispiele

Grundlegendes Beispiel

In diesem Beispiel wird das ::details-content Pseudoelement verwendet, um eine background-color auf den Inhalt des <details>-Elements zu setzen.

HTML

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

CSS

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

Ergebnis

Beispiel mit Übergang

In diesem Beispiel wird das ::details-content Pseudoelement verwendet, um einen transition auf den Inhalt des <details>-Elements zu setzen, so dass er beim Aufklappen sanft einblendet und beim Einklappen wieder ausblendet. Um dies zu erreichen, werden zwei separate Übergänge im transition-Kurzbefehlswert angegeben:

• Die opacity-Eigenschaft erhält einen grundlegenden Übergang über 600ms, um den Einblend-/Ausblendeffekt zu erzeugen.
• Die content-visibility-Eigenschaft (die zwischen hidden und visible umgeschaltet wird, wenn der <details>-Inhalt aufgeklappt/eingeklappt wird) erhält ebenfalls einen grundlegenden 600ms Übergang, jedoch mit dem transition-behavior-Wert allow-discrete. Dies lässt den Browser einen Übergang bei content-visibility starten, dessen Animationsverhalten diskret ist. Der Effekt ist, dass der Inhalt für die gesamte Dauer des Übergangs sichtbar ist, so dass andere Übergänge gesehen werden können. Wenn dieser Übergang nicht enthalten wäre, würde der Inhalt beim Einklappen des <details>-Inhalts sofort verschwinden — Sie würden das sanfte Ausblenden nicht sehen.

HTML

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

CSS

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

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <details>
• <summary>