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 @@ -1280,6 +1280,33 @@ File Selector Button: the ''::file-selector-button'' pseudo-element</h3>
1280
1280
<pre class="lang-css"> ::file-selector-button { border: 3px solid green }</pre>
1281
1281
</div>
1282
1282
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
+
1283
1310
<h2 id="interactions">
1284
1311
Overlapping Pseudo-element Interactions</h2>
1285
1312
You can’t perform that action at this time.
0 commit comments