File tree Expand file tree Collapse file tree 1 file changed +27
-0
lines changed Expand file tree Collapse file tree 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>
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">
13141341Overlapping Pseudo-element Interactions</h2>
13151342
You can’t perform that action at this time.
0 commit comments