Skip to content

Commit 2225eec

Browse files
committed
Add ::details-content pseudo-element.
This adds the ::details-content pseudo-element as resolved in: 1. w3c#9879 (comment) 2. whatwg/html#10200 (comment) / w3c#9951 (comment) 3. w3c#9879 (comment) and uses the definition added in w3c#10083.
1 parent 0f41712 commit 2225eec

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

css-pseudo-4/Overview.bs

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1310,6 +1310,33 @@ File Selector Button: the ''::file-selector-button'' pseudo-element</h3>
13101310
<pre class="lang-css">::file-selector-button { border: 3px solid green }</pre>
13111311
</div>
13121312

1313+
<h3 id="details-content-pseudo">
1314+
Expandable contents of details element: the ''::details-content'' pseudo-element</h3>
1315+
1316+
The <dfn>::details-content</dfn> pseudo-element targets
1317+
the additional information in a a <{details}> element
1318+
that can be expanded or collapsed.
1319+
It is a [=part-like pseudo-element=].
1320+
1321+
There is no restriction on which properties apply to the
1322+
''::details-content'' pseudo-element.
1323+
1324+
<div class="example" id="details-content-example">
1325+
For example, the following example would
1326+
animate the opacity of the additional information
1327+
when the <{details}> element opens:
1328+
1329+
<pre class="lang-css">details::details-content {
1330+
opacity: 0;
1331+
transition: content-visibility 300ms allow-discrete step-end, opacity 300ms;
1332+
}
1333+
1334+
details[open]::details-content {
1335+
opacity: 1;
1336+
transition: content-visibility 300ms allow-discrete step-start, opacity 300ms;
1337+
}</pre>
1338+
</div>
1339+
13131340
<h2 id="interactions">
13141341
Overlapping Pseudo-element Interactions</h2>
13151342

0 commit comments

Comments
 (0)