Skip to content

Commit 35d5298

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 6b3a79f commit 35d5298

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
@@ -1280,6 +1280,33 @@ File Selector Button: the ''::file-selector-button'' pseudo-element</h3>
12801280
<pre class="lang-css">::file-selector-button { border: 3px solid green }</pre>
12811281
</div>
12821282

1283+
<h3 id="details-content-pseudo">
1284+
Expandable contents of details element: the ''::details-content'' pseudo-element</h3>
1285+
1286+
The <dfn>::details-content</dfn> pseudo-element targets
1287+
the additional information in a a <{details}> element
1288+
that can be expanded or collapsed.
1289+
It is a [=part-like pseudo-element=].
1290+
1291+
There is no restriction on which properties apply to the
1292+
''::details-content'' pseudo-element.
1293+
1294+
<div class="example" id="details-content-example">
1295+
For example, the following example would
1296+
animate the opacity of the additional information
1297+
when the <{details}> element opens:
1298+
1299+
<pre class="lang-css">details::details-content {
1300+
opacity: 0;
1301+
transition: content-visibility 300ms allow-discrete step-end, opacity 300ms;
1302+
}
1303+
1304+
details[open]::details-content {
1305+
opacity: 1;
1306+
transition: content-visibility 300ms allow-discrete step-start, opacity 300ms;
1307+
}</pre>
1308+
</div>
1309+
12831310
<h2 id="interactions">
12841311
Overlapping Pseudo-element Interactions</h2>
12851312

0 commit comments

Comments
 (0)