`::details-content` - CSS Selector

::details-content

Summary of characteristics of the `::details-content` selector

Quick description

This pseudo-element targets the detailed content of a details tag.

Status

Standard

W3C Module

CSS Pseudo-Elements Module

References (W3C)

CSS Pseudo-Elements Module Level 4

Document status: WD (Working Draft)

`::details-content` pseudo-element - Description.

The selector ::details-content is very specific: it targets, inside a details tag, the text that is normally hidden and that shows up when you ask to see it.

In HTML the code is this:


	details
		summarySummary of the text (always visible)./summary.
		Text displayed on demand.
	/details

Which gives in display:

Description of the details tag.

A details tag is displayed by showing only the summary part, with a small triangle on the left. Clicking on this triangle reveals the full text.

Note. The black triangle can be targeted by the pseudo-element ::marker if needed.

`::details-content` pseudo-element - Examples of use.

Use of `::details-content`.

Click on the triangle to request the detail to be displayed. The styles require displaying in red and apply a transition to avoid the text appearing too abruptly.

The selector ::details-content.

The pseudo-element selector ::details-content only applies to details tags. It targets the hidden text that shows up when the user clicks on the triangle.

In this example, we set up a transition on the opacity and content-visibility properties to make showing and hiding the details gradual. Notice the use of the [open] selector on the details tag.

Notice the allow-discrete option in the transition code, it corresponds to the property transition-behavior. The content-visibility property is indeed discrete (instant switch from one value to another during animations or transitions). By using allow-discrete, we allow the content to stay visible throughout the duration of the transition.

The full code should be improved, but here are the basics to create a dropdown menu. To make sure only one menu is open at a time, we gave the same name to each of the details tags (this isn't CSS).

Menu 1

Command 1
Command 2
Command 3

Menu 2

Command 1
Command 2
Command 3
Command 4

`::details-content` pseudo-element - Browser compatibility.

The pseudo-element ::details-content is pretty well recognized by recent browsers.

Column 1

Support by browsers for the pseudo-element ::details-content that targets the hidden text in a details tag.

Notes:

(1) Does not support chaining pseudo-elements after ::details-content.

::details-content
pseudo-element

Estimated overall support.

87%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Safari sur IOS

Opéra

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`::details-content` pseudo-element - Historic.

CSS Pseudo-Elements Module Level 4

Regarding ::details-content Introduction of the pseudo-element ::details-content which, as its name indicates, targets the detail of a details tag.

January 15, 2015
Working Draft.

See also...

Some pseudo-classes and pseudo-elements that target elements based on their state, or the state of the window. We also invite you to take a look at the following pages:

::backdrop

A pseudo-element targeting the element added by browsers behind dialog boxes or elements displayed in full screen.

⚠

:closed