CSS ::details-content Pseudo-Element

The ::details-content pseudo-element represents the expandable content inside an HTML <details> element, excluding its <summary>. It allows developers to style the content area and create opening and closing animations without adding an extra HTML wrapper.

Syntax

details::details-content {
  padding: 15px;
  background-color: #f5f5f5;
}

The details selector targets HTML <details> elements.

The ::details-content pseudo-element represents the content container associated with each details element.

The padding property adds spacing inside the content container.

The background-color property changes the background behind the expandable content.

For example:

details::details-content {
  padding: 12px;
  border-top: 1px solid #ddd;
}

This rule adds spacing and a top border to the expandable content without changing the summary heading.

Important: The ::details-content pseudo-element does not include the <summary> element. The summary can be styled separately using the summary selector.

How It Works

The HTML <details> element creates a disclosure widget that users can expand or collapse.

The <summary> element provides the visible heading or label used to toggle the disclosure.

The remaining content belongs to the expandable content area represented by ::details-content.

For example:

<details>
  <summary>What is CSS?</summary>
  <p>CSS controls the presentation of HTML elements.</p>
</details>

When the details element is closed, the browser normally displays only the summary.

When the user activates the summary, the details element opens and reveals the paragraph.

The ::details-content pseudo-element provides a styling target for the expandable area.

For example:

details::details-content {
  padding: 12px;
  background-color: #eef5ff;
}

In supporting browsers, the expanded content receives a light blue background and internal spacing.

The browser continues to manage the native open and closed states of the details element.

Understanding the Details Element

The HTML <details> element provides built-in disclosure functionality without requiring JavaScript.

Its two primary parts are:

<summary> - The visible label that users activate to open or close the disclosure.
Expandable content - The remaining content that becomes visible when the details element is open.

The open attribute determines whether the details element starts expanded.

<details open>
  <summary>CSS Basics</summary>
  <p>CSS styles the appearance and layout of webpages.</p>
</details>

Because the open attribute is present, the content is initially visible.

Removing the attribute makes the details element initially closed.

CSS can also detect the open state using the [open] attribute selector.

details[open] {
  border-color: #0066cc;
}

This rule changes the border color when the details element is open, provided the element has a border.

The ::details-content pseudo-element provides more specific control over the expandable content area.

Styling Expandable Content

The ::details-content pseudo-element allows developers to style the expandable content independently of the summary.

Changing the Background

details::details-content {
  background-color: #eef5ff;
}

This rule gives the expandable content a light blue background.

Adding Padding

details::details-content {
  padding: 15px;
}

This rule adds space between the content and the edges of its container.

Adding a Border

details::details-content {
  border-top: 1px solid #ccc;
}

This rule adds a separator between the summary and the expandable content.

Combining Styles

details::details-content {
  padding: 15px;
  background-color: #eef5ff;
  border-top: 1px solid #c5d9f1;
}

These declarations create a distinct content area while preserving the native disclosure behavior.

Because support for the pseudo-element is newer, verify its appearance in the browsers used by your audience.

Example

The following example creates an expandable CSS information panel with separate styles for its summary and content.

HTML:

<details class="css-details" open>
  <summary>What is CSS?</summary>
  <p>CSS stands for Cascading Style Sheets.</p>
  <p>It controls colors, fonts, spacing, and layouts.</p>
</details>

CSS:

.css-details {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.css-details summary {
  padding: 12px 15px;
  background-color: #f5f5f5;
  font-weight: bold;
  cursor: pointer;
}
.css-details::details-content {
  padding: 15px;
  background-color: #eef5ff;
  border-top: 1px solid #ccc;
}
.css-details::details-content p {
  margin: 0 0 10px;
}
.css-details::details-content p:last-child {
  margin-bottom: 0;
}

Browser Result

What is CSS?

CSS stands for Cascading Style Sheets.

It controls colors, fonts, spacing, and layouts.

Click the summary to expand or collapse the content.

The summary remains visible in both states.

In supporting browsers, the ::details-content pseudo-element applies the background, padding, and border to the expandable area.

Note: The Browser Result uses an ordinary HTML wrapper to reproduce the intended appearance across browsers. The actual ::details-content example requires browser support for the pseudo-element.

Animating Expandable Content

One of the newer uses of ::details-content is creating animations when a details element opens or closes.

For example, the following CSS transitions the content container's height between its closed and open states.

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}
@supports (interpolate-size: allow-keywords) {
  details {
    interpolate-size: allow-keywords;
  }
}

The block-size property controls the logical height of the content container in a horizontal writing mode.

The closed state uses block-size: 0.

The open state uses block-size: auto.

The interpolate-size: allow-keywords declaration enables interpolation between a numeric size and an intrinsic size such as auto in supporting browsers.

The allow-discrete transition behavior allows the discrete content-visibility change to participate in the transition.

Without the necessary browser support, the details element can still open and close normally, but the height animation may not occur.

Note: Animating intrinsic sizes is a newer CSS capability. Test opening and closing transitions in the browsers used by your audience.

Using content-visibility

The content-visibility property controls whether an element's contents are rendered.

The ::details-content pseudo-element is particularly useful because browsers can manage the visibility of the expandable content according to the details element's state.

For example:

details::details-content {
  transition: content-visibility 0.3s allow-discrete;
}

This rule requests a transition involving the visibility of the expandable content.

When combined with supported size transitions, it can help create smoother disclosure animations.

However, content-visibility is a discrete property. It does not gradually fade content by itself.

To create a fading effect, combine the visibility transition with an appropriate opacity transition.

details::details-content {
  opacity: 0;
  transition: opacity 0.3s ease, content-visibility 0.3s allow-discrete;
}
details[open]::details-content {
  opacity: 1;
}

This example requests an opacity transition while the browser manages the disclosure content's visibility.

The exact timing and behavior depend on support for discrete transitions and the details content pseudo-element.

::details-content vs. ::marker

The ::details-content and ::marker pseudo-elements target different parts of a disclosure widget.

::details-content

The ::details-content pseudo-element represents the expandable content area.

details::details-content {
  background-color: #eef5ff;
  padding: 15px;
}

This rule styles the content revealed when the details element opens.

::marker

The ::marker pseudo-element can target the disclosure marker associated with a summary element.

summary::marker {
  color: #0066cc;
}

This rule requests a blue disclosure marker in browsers that support the relevant marker styling.

The marker indicates whether the details element can be expanded or collapsed.

The two pseudo-elements can be used together to customize different parts of the disclosure interface.

Limitations

The ::details-content pseudo-element has several important limitations.

It applies to the expandable content container of an HTML <details> element.
It does not include the <summary> element.
It does not replace the native disclosure functionality.
It does not automatically animate opening and closing.
Animations involving intrinsic sizes require additional CSS features and browser support.
Browser support is less established than support for the HTML details element itself.
Unsupported browsers ignore the pseudo-element selector while retaining native details behavior.

The pseudo-element does not create a new HTML element or change the document's semantic structure.

It provides a styling target for a content container generated by the browser.

For broad compatibility, keep the disclosure functional without relying on advanced animations or pseudo-element styling.

Accessibility Considerations

The HTML <details> and <summary> elements provide built-in disclosure functionality and keyboard interaction.

The ::details-content pseudo-element allows visual customization without replacing these native controls.

Follow these accessibility practices:

Use a meaningful summary that describes the expandable content.
Keep the summary visible and recognizable as an interactive control.
Preserve visible keyboard focus indicators.
Ensure sufficient contrast between text and background colors.
Do not rely on animations to communicate essential information.
Respect reduced-motion preferences when adding transitions.
Ensure the content remains accessible when CSS is unavailable.

For users who prefer reduced motion, disable decorative transitions.

@media (prefers-reduced-motion: reduce) {
  details::details-content {
    transition: none;
  }
}

This rule removes transitions from the expandable content when the user's system requests reduced motion.

Native disclosure behavior should remain functional regardless of whether the pseudo-element is supported.

Browser Support

The ::details-content pseudo-element is a newer CSS feature with limited availability across browsers.

Support for HTML <details> and <summary> elements is much broader than support for the pseudo-element itself.

Browsers without ::details-content support continue to provide the normal expandable details interface, but ignore styles targeting the pseudo-element.

Animations may additionally depend on support for interpolate-size, intrinsic size interpolation, and discrete transitions.

For current compatibility information, visit Can I Use? and search for ::details-content.

Consult the MDN reference for detailed browser compatibility information.

Specifications

The ::details-content pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The HTML <details> and <summary> elements are defined in the WHATWG HTML Living Standard .

These specifications describe the disclosure content container and the native behavior of HTML details elements.