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

Trevor I. Lasn

Optimize Your Astro Site's <head> with astro-capo

CSS @supports: Write Future-Proof CSS

WebAssembly (Wasm): When (and When Not) to Use It

HTML Details Element: The Native Accordion You're Not Using

Improve PageSpeed Insights Score with Lazy Loading Iframes

Inside the CSS Engine: CSSOM Explained

How To Implement Content Security Policy (CSP) Headers For Astro

LH and RLH: The CSS Units That Make Vertical Spacing Easy

Preloading Responsive Images