::details-content: style expandable content without wrapper divs

The ::details-content pseudo-element solves a problem that existed since <details> was introduced: you couldn’t style the content area without wrapping it in a div.

The problem: you want the summary and content to look different, so you’d need to add a wrapper div just for styling:

<!-- The old way: wrapper required for styling -->
<details>
  <summary>How do I return an order?</summary>
  <div class="content-wrapper">
    <p>
      Visit your order page and click "Return Item". You'll receive a prepaid
      shipping label via email within 24 hours.
    </p>
  </div>
</details>

details::summary {
  padding: 1rem;
  background: white;
}
.content-wrapper {
  padding: 1rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

Now with ::details-content, forget the wrapper:

<!-- Clean HTML, no wrapper needed -->
<details>
  <summary>How do I return an order?</summary>
  <p>
    Visit your order page and click "Return Item". You'll receive a prepaid
    shipping label via email within 24 hours.
  </p>
</details>

details::summary {
  padding: 1rem;
  background: white;
}
details::details-content {
  padding: 1rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

Here’s what that looks like in action:

You can also animate it:

details::details-content {
  opacity: 0;
  transition:
    opacity 300ms,
    content-visibility 300ms allow-discrete;
}
details[open]::details-content {
  opacity: 1;
}

This fades the content in/out smoothly when opening and closing. The allow-discrete keyword lets content-visibility participate in the transition—important for performance when you have lots of content inside.

::details-content hit Baseline status in September 2025, so it works everywhere: Chrome 131+, Firefox 143+, Safari 18.4+, and Edge 131+. For older browsers, fall back to wrapper divs.

Use it for FAQs, documentation sidebars, expandable menus, pricing tiers, anything where the content needs to look different from the trigger. You get cleaner HTML, less CSS, full control over the content area, and no semantic compromises.