::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 Pseudoelement repräsentiert die erweiterbaren/zusammenklappbaren Inhalte 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

In diesem Beispiel wird das ::details-content-Pseudoelement 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;
}

Ergebnis

Transition-Beispiel

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

  • Die opacity-Eigenschaft erhält einen einfachen Übergang über 600ms, um den Ein- und 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 einfachen 600ms Übergang, jedoch mit dem Wert transition-behavior 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 für die gesamte Dauer des Übergangs sichtbar ist und andere Übergänge gesehen werden können. Wenn dieser Übergang nicht eingeschlossen wäre, würde der Inhalt sofort verschwinden, wenn der <details>-Inhalt zusammengeklappt wird — 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;
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch