Copy 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>Explore the CSS ::details-content pseudo-element with a native details element, customize the expandable content, and copy the generated HTML and CSS.
It targets the expandable content of a details element, without affecting the summary.
<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>.details-demo details[open]::details-content {
background-color: #dff7ec;
color: #17352a;
padding: 20px;
border-radius: 12px;
border: 2px solid #67d2a1;
}