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

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;
}

Ergebnis

Übergangsbeispiel

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

  • Die opacity Eigenschaft erhält einen einfachen Ü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/eingeklappt wird) erhält ebenfalls einen einfachen 600ms Übergang, jedoch mit dem transition-behavior Wert allow-discrete. Dies ermöglicht dem Browser, einen Übergang bei content-visibility zu starten, dessen Animationsverhalten diskret ist. Der Effekt ist, dass der Inhalt für die gesamte Dauer des Übergangs sichtbar ist, sodass andere Übergänge sichtbar sind. Wenn dieser Übergang nicht enthalten wäre, würde der Inhalt sofort verschwinden, wenn der <details> Inhalt eingeklappt wird – man würde 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

BCD tables only load in the browser

Siehe auch