::details-content

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Syntax

css
selector::details-content

Beispiele

Einfaches Beispiel

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

HTML

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

CSS

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

Resultat

Transition Beispiel

In diesem Beispiel wird das ::details-content Pseudo-Element verwendet, um eine transition auf den Inhalt des <details> Elements zu setzen, sodass dieser reibungslos eingeblendet wird, wenn er erweitert wird und wieder ausblendet, wenn er zusammengeklappt wird. Um dies zu erreichen, werden zwei separate Übergänge innerhalb der transition Kurzform-Eigenschaft spezifiziert:

  • Die opacity Eigenschaft erhält einen grundlegenden Übergang über 600ms, um den Ein-/Ausblendeffekt zu erzeugen.
  • Die content-visibility Eigenschaft (die zwischen hidden und visible umgeschaltet wird, wenn der <details> Inhalt erweitert/zusammengeklappt wird) erhält ebenfalls einen grundlegenden 600ms Übergang, aber mit dem transition-behavior Wert allow-discrete angegeben. Dies ermöglicht dem Browser, einen Übergang auf content-visibility zu starten, dessen Animationsverhalten diskret ist. Der Effekt ist, dass der Inhalt während der gesamten Dauer des Übergangs sichtbar ist, sodass andere Übergänge sichtbar werden. Wäre dieser Übergang nicht enthalten, würde der Inhalt sofort verschwinden, wenn der <details> Inhalt zusammengeklappt würde — Sie würden das sanfte Ausblenden nicht sehen.

HTML

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

CSS

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

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

Resultat

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4
# details-content-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch