::details-content CSS Pseudo Element

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ::details-content pseudo-element represents the expandable content area inside a <details> element, excluding the <summary> itself. It allows authors to directly style the portion of a disclosure widget that becomes visible when the element is opened, without needing to wrap the content in extra containers. This pseudo-element is especially useful for controlling spacing, animations, backgrounds, and transitions tied specifically to the revealed content rather than the toggle header.

The ::details-content pseudo-element is intrinsically linked to the HTML details element and reacts to its open or closed state. When the <details> element is collapsed, the content targeted by ::details-content is not rendered visually; when expanded, it becomes part of the layout flow. This allows developers to style open-state behaviors such as padding expansion, opacity changes, or animated reveals without affecting the <summary> element. It also integrates cleanly with the built-in accessibility and interaction model of <details>, making it preferable to custom JavaScript toggles in many cases.

One of the most powerful uses of ::details-content is in animation and transitions. By combining it with properties like transition, opacity, and height, you can create smooth open and close effects that feel native and performant. Unlike older techniques that required wrapper elements or JavaScript height calculations, this pseudo-element gives direct styling access to the revealable region itself. It also works well with logical properties such as padding-block, which helps maintain writing-mode flexibility.

Example: Styling expandable content

<details>
  <summary>More information</summary>
  <p>This content is revealed when the details element is opened.</p>
</details>

details::details-content {
  padding: 1rem;
  background: #f5f7fa;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

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

In this example, the ::details-content pseudo-element applies spacing and visual styling only to the expandable section, keeping the <summary> visually separate and interactive. This results in cleaner markup, better accessibility, and more predictable styling behavior compared to older disclosure-pattern techniques.

Syntax

selector::details-content

Example

HTML

<details class="custom-details">

  <summary>Click to see more information</summary>

  <div class="content-wrapper">

    <p>This is the hidden content. By using the ::details-content pseudo-element, we can style the container of this text directly without needing extra wrapper classes for layout.</p>

    <ul>

      <li>Feature One</li>

      <li>Feature Two</li>

    </ul>

  </div>

</details>

CSS

/* Style the main container */

.custom-details {

  border: 1px solid #ddd;

  border-radius: 8px;

  overflow: hidden;

  font-family: sans-serif;

  max-width: 400px;

}



/* Style the clickable header */

summary {

  padding: 1rem;

  background-color: #f4f4f4;

  cursor: pointer;

  font-weight: bold;

}



/* The new pseudo-element */

.custom-details::details-content {

  background-color: #ffffff;

  padding: 1rem;

  border-top: 1px solid #eee;

  /* You can now animate this more reliably in modern browsers */

  transition: height 0.3s ease, content-visibility 0.3s allow-discrete;

}



/* Optional: change background on open */

.custom-details[open] summary {

  background-color: #e0e0e0;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ::details-content pseudo element. Hover over a browser icon to see the version that first introduced support for this CSS psuedo element.