diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index f9b1fe5211f..f69049799da 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1310,6 +1310,33 @@ File Selector Button: the ''::file-selector-button'' pseudo-element
::file-selector-button { border: 3px solid green }
+

+Expandable contents of details element: the ''::details-content'' pseudo-element

+ + The ::details-content pseudo-element targets + the additional information in a a <{details}> element + that can be expanded or collapsed. + It is a [=part-like pseudo-element=]. + + There is no restriction on which properties apply to the + ''::details-content'' pseudo-element. + +
+ For example, the following example would + animate the opacity of the additional information + when the <{details}> element opens: + +
details::details-content {
+  opacity: 0;
+  transition: content-visibility 300ms allow-discrete step-end, opacity 300ms;
+}
+
+details[open]::details-content {
+  opacity: 1;
+  transition: content-visibility 300ms allow-discrete step-start, opacity 300ms;
+}
+
+

Overlapping Pseudo-element Interactions