::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 Pseudo-Element verwendet, um eine background-color auf den Inhalt des <details> Elements festzulegen.

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 Pseudo-Element verwendet, um einen transition auf den Inhalt des <details> Elements festzulegen, sodass es beim Erweitern sanft einblendet und beim Zusammenklappen wieder ausblendet. Um dies zu erreichen, werden zwei separate Übergänge im transition Kurzschreibweise-Attribut angegeben:

• 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/zusammengeklappt wird) erhält ebenfalls einen einfachen 600ms Übergang, jedoch mit dem transition-behavior Wert allow-discrete spezifiziert. 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 bleibt, was es ermöglicht, andere Übergänge zu sehen. Wenn dieser Übergang nicht eingeschlossen wäre, würde der Inhalt sofort verschwinden, wenn der <details> Inhalt zusammengeklappt würde — der sanfte Ausblendeffekt wäre nicht sichtbar.

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>