::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

Einfaches 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

Übergangsbeispiel

In diesem Beispiel wird das ::details-content Pseudoelement verwendet, um einen transition auf den Inhalt des <details>-Elements zu setzen, sodass es beim Erweitern sanft eingeblendet und beim Zuklappen wieder ausgeblendet wird. Um dies zu erreichen, werden zwei separate Übergänge innerhalb der Kurznotationseigenschaft transition angegeben:

• Der opacity-Eigenschaft wird ein einfacher Übergang über 600ms gegeben, um den Ein-/Ausblendeffekt zu erzeugen.
• Der content-visibility-Eigenschaft (die zwischen hidden und visible gewechselt wird, wenn der <details>-Inhalt erweitert/zugeklappt wird) wird ebenfalls ein einfacher 600ms Übergang mit dem transition-behavior-Wert allow-discrete zugewiesen. Dadurch wird dem Browser gestattet, einen Übergang bei content-visibility zu starten, dessen Animationseigenschaft diskret ist. Der Effekt ist, dass der Inhalt während der gesamten Dauer der Transition sichtbar ist, wodurch andere Transitionen sichtbar werden. Ohne diesen Übergang würde der Inhalt sofort verschwinden, wenn der <details>-Inhalt zugeklappt wird — 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>