` inside a ``. Using `display: inline` on a `` inside a `` works fine.
## The `::details-content` pseudo
In browsers, the `
` element is implemented using [Shadow DOM](https://developer.mozilla.org/docs/Web/API/Web_components/Using_shadow_DOM). It contains one `` for the summary (with a default summary child) and a `` for all remaining content, meaning all children of the `` element except the `` element.
```html
↳ #shadow-root (user-agent)
Details
```
In addition to using more display types on ``, the content slot can now be targeted using the `::details-content` pseudo-element. You can use this pseudo to style the container that wraps the content of the `` element.
```css
details::details-content {
border: 5px dashed hotpink;
}
```
To only apply the set style when the `` element is in the open state, prepend the `[open]` selector to it.
```css
[open]::details-content {
border: 5px dashed hotpink;
}
```
It is recommended to only apply styling to the `::details-content` pseudo when the `` element is in the `[open]` state.
#### Demo
#### Recording
Recording of in Chrome 131
The `display` type of `::details-content` is set to `block` in the UA style sheet, whereas before it used to be `display: contents`. This change might work against you in some cases, such as disclosed content relying on `height: 100%`. If this is an issue for you, you can work around this by setting the `display` type back to `contents`, like so: `details[open]::details-content { display: contents; }`.
### Animating the `::details-content` pseudo
> [!IMPORTANT]
> **Important:** as with any animation-related code, it is recommended to take [the `@prefers-reduced-motion` user preference](https://web.dev/articles/prefers-reduced-motion) into account. For demonstration purposes this check is not included in any of the demos that follow.
You can animate the content of the `` element as it expands. In the following example, the width animates from `0px` to `300px`.
```css
::details-content {
transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
width: 0;
}
[open]::details-content {
width: 300px;
}
```
Besides transitioning the `width`, the `content-visibility` property also needs to transition. This is because its value changes between the unopened and opened state, as defined in the User-Agent style sheet. Because that property is a discretely animatable property, you need [the `allow-discrete` keyword](https://developer.chrome.com/blog/entry-exit-animations.md.txt#transitioning_discrete_animations) to make it work.
> [!NOTE]
> **Note:** Even though the `content-visibility` property is a discretely animatable property which typically flips at the 50% midpoint, it behaves a bit differently and maps to the non-`hidden` value when transitioning from `hidden` to non-`hidden`. This is similar to the behavior of `visibility` property and is [documented in the CSS Containment specification](https://drafts.csswg.org/css-contain/#content-visibility-animation).
Added to the exclusive accordion demo shared before, the result becomes this:
#### Demo
#### Recording
Recording of in Chrome 131
The `height` can also be animated. To animate to `height: auto`, you need to [use `interpolate-size` or `calc-size()`](https://developer.chrome.com/docs/css-ui/animate-to-height-auto.md.txt). Additionally, to prevent the content from bleeding out of the `::details-content` pseudo, apply `overflow: clip` to it.
```css
::details-content {
transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
height: 0;
overflow: clip;
}
/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
[open]::details-content {
height: auto;
}
}
/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
[open]::details-content {
height: 150px;
overflow-y: scroll; /* In case the contents should be taller than 150px */
}
}
```
You can see the code in action in the following demo, [inspired by Material UI's accordion](https://mui.com/material-ui/react-accordion/). The content of each `` element nicely animates.
#### Demo
#### Recording
Recording of in Chrome 131
In browsers with no support for `::details-content` the component still works fine. The only thing visitors don't get to see is the animation.
> [!NOTE]
> **Note:** if you are wondering if a wrapper `` around the content can give you the same outcome the answer is no. In [this variant](https://codepen.io/web-dot-dev/pen/NWQBypa) that does not animate `::details-content` but which animates a wrapper div you can see the animation only works when opening the `
` element, not when closing it.
## Feature detection
To feature detect support for the `::details-content` pseudo in CSS, use the following snippet.
```css
@supports selector(::details-content) {
...
}
```
You can also use this detection as a telltale check to figure out if the browser your visitor is using supports the extra display values or not.
## Accessibility considerations
The introduction of the `::details-content` pseudo-element and the ability to change the display type does not have an impact on the accessibility of the `` element.
Like before, at least in Chromium based browsers and [as per HTML Standard](https://html.spec.whatwg.org/multipage/interaction.html#interaction-with-details-and-hidden=until-found), the `` element is searchable and automatically expands when the browser tries to scroll to its hidden contents in response to find-in-page, ScrollToTextFragment, and element fragment navigation. This does not change.
However, before using exclusive accordions, consider if it's helpful or harmful to users. While using an exclusive accordion reduces the amount of visual space content occupies, users may have to open many items to consume all the information. This may frustrate users who want to look at multiple items at the same time.
## What about styling the marker?
Currently styling of the list marker is not interoperable as there are two different approaches, one taken by Gecko and (current) Chromium, and another taken by WebKit (which was previously shared with Chromium).
Once the feature is interoperable, our aim is to give you better control over how to style the marker.
## More demos
To close off, here are some more demos for you to check out. They all use `::details-content`.
### UIKit Accordion
#### Demo
#### Recording
Recording of in Chrome 131
This demo is built after the [UIKit Accordion](https://getuikit.com/docs/accordion). The code is practically the same as the Material UI accordion that was shared before.
### Partially opened disclosure widget
#### Demo
#### Recording
Recording of in Chrome 131
This demo features a partially opened disclosure widget whose content is already visible on the screen. To achieve this, the `content-visibility` is always set to `visible`. The `height` gets animated [using `calc-size()`](https://developer.chrome.com/docs/css-ui/animate-to-height-auto.md.txt#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size) because there is a calculation involved.
```css
::details-content {
content-visibility: visible; /* Make it always visible */
transition: height 0.5s ease;
height: 150px;
overflow: clip;
}
[open]::details-content {
height: calc-size(auto, size + 0.5rem); /* calc-size because we need to add a length */
}
```
For styling convenience the content is wrapped in a wrapper div. The wrapper div gets the layout styles such as `padding` applied and the `::details-content` pseudo is animated.