::details-content: style expandable content without wrapp...

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:

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

1
details::summary {
2
  padding: 1rem;
3
  background: white;
4
}
5

6
.content-wrapper {
7
  padding: 1rem;
8
  background: #f9fafb;
9
  border-top: 1px solid #e5e7eb;
10
}

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

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

1
details::summary {
2
  padding: 1rem;
3
  background: white;
4
}
5

6
details::details-content {
7
  padding: 1rem;
8
  background: #f9fafb;
9
  border-top: 1px solid #e5e7eb;
10
}

Here’s what that looks like in action:

How do I return an order?

Visit your order page and click "Return Item". You'll receive a prepaid shipping label via email within 24 hours. Ship the item back in original condition.

What's your return window?

We accept returns within 30 days of purchase. Items must be unused, in original packaging, and have the original receipt or proof of purchase.

Do you offer refunds or exchanges?

You can choose between a full refund or an exchange for a different size or color. Refunds are processed within 5-7 business days after we receive your return.

What if my item arrives damaged?

Contact our support team immediately with photos of the damage. We'll send a replacement at no cost or process a full refund, whichever you prefer.

You can also animate it:

1
details::details-content {
2
  opacity: 0;
3
  transition:
4
    opacity 300ms,
5
    content-visibility 300ms allow-discrete;
6
}
7

8
details[open]::details-content {
9
  opacity: 1;
10
}

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.

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

The ::details-content pseudo-element lets you style the expandable content of details elements separately from the summary, no divs needed.

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

10 Essential Terminal Commands Every Developer Should Know

Remove Unnecessary NPM Packages with eslint-plugin-depend

HTTP CONNECT: Building Secure Tunnels Through Proxies

Improve PageSpeed Insights Score with Lazy Loading Iframes

NPQ: Open source CLI tool that audits and protects your npm installs from malicious packages

Frontend Security Checklist

Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

SecretLint — A Linter for Preventing Committing Credentials