From 2225eec4897fab1347eabf2a0e82acaf4976f4c5 Mon Sep 17 00:00:00 2001
From: "L. David Baron" <dbaron@chromium.org>
Date: Tue, 28 May 2024 17:34:13 -0400
Subject: [PATCH] Add ::details-content pseudo-element.

This adds the ::details-content pseudo-element as resolved in:

1. https://github.com/w3c/csswg-drafts/issues/9879#issuecomment-1942785500

2. https://github.com/whatwg/html/issues/10200#issuecomment-1998676547 /
   https://github.com/w3c/csswg-drafts/issues/9951#issuecomment-1997916879

3. https://github.com/w3c/csswg-drafts/issues/9879#issuecomment-2121658036

and uses the definition added in #10083.
---
 css-pseudo-4/Overview.bs | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

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</h3>
     <pre class="lang-css">::file-selector-button { border: 3px solid green }</pre>
   </div>
 
+<h3 id="details-content-pseudo">
+Expandable contents of details element: the ''::details-content'' pseudo-element</h3>
+
+  The <dfn>::details-content</dfn> 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.
+
+  <div class="example" id="details-content-example">
+    For example, the following example would
+    animate the opacity of the additional information
+    when the <{details}> element opens:
+
+    <pre class="lang-css">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;
+}</pre>
+  </div>
+
 <h2 id="interactions">
 Overlapping Pseudo-element Interactions</h2>