File tree 1 file changed +27
-0
lines changed
1 file changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -1310,6 +1310,33 @@ File Selector Button: the ''::file-selector-button'' pseudo-element</h3>
1310
1310
<pre class="lang-css"> ::file-selector-button { border: 3px solid green }</pre>
1311
1311
</div>
1312
1312
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
+
1313
1340
<h2 id="interactions">
1314
1341
Overlapping Pseudo-element Interactions</h2>
1315
1342
You can’t perform that action at this time.
0 commit comments