CSS ::details-content playground

Explore the CSS ::details-content pseudo-element with a native details element, customize the expandable content, and copy the generated HTML and CSS.

What does ::details-content style?

It targets the expandable content of a details element, without affecting the summary.

HTML

<div class="details-demo">
  <details open>
    <summary>What does ::details-content style?</summary>
    <p>It targets the expandable content of a details element, without affecting the summary.</p>
  </details>
</div>

CSS

.details-demo details[open]::details-content {
  background-color: #dff7ec;
  color: #17352a;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #67d2a1;
}