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

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

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<details class="open:details-content:bg-[#dff7ec] open:details-content:text-[#17352a] open:details-content:p-5 open:details-content:rounded-xl open:details-content:border-2 open:details-content:border-solid open:details-content:border-[#67d2a1]" open>
  <summary>What does ::details-content style?</summary>
  <p>It targets the expandable content of a details element, without affecting the summary.</p>
</details>

CSS

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