::details-content

In this example the ::details-content pseudo-element is used to set a background-color on the content of the <details> element.

HTML

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

CSS

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

Result

In this example the ::details-content pseudo-element is used to set a transition on the content of the <details> element so that it smoothly fades into view when expanded, and fades out again when collapsed. To achieve this, two separate transitions are specified inside the transition shorthand property:

• The opacity property is given a basic transition over 600ms to create the fade-in/fade-out effect.
• The content-visibility property (which is toggled between hidden and visible when the <details> content is expanded/collapsed) is also given a basic 600ms transition, but with the transition-behavior value allow-discrete specified. This opts the browser into having a transition started on content-visibility, the animation behavior of which is discrete. The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the <details> content was collapsed — you wouldn't see the smooth fade-out.

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

Result

• <details>
• <summary>