From 83fe58b61763d206e6ba003411c56015acfb2011 Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Fri, 6 Dec 2024 11:57:14 +0000
Subject: [PATCH 1/3] Add `::details-content` page

---
 .../css/_doublecolon_details-content/index.md | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 files/en-us/web/css/_doublecolon_details-content/index.md

diff --git a/files/en-us/web/css/_doublecolon_details-content/index.md b/files/en-us/web/css/_doublecolon_details-content/index.md
new file mode 100644
index 000000000000000..aa415b193a143cb
--- /dev/null
+++ b/files/en-us/web/css/_doublecolon_details-content/index.md
@@ -0,0 +1,51 @@
+---
+title: "::details-content"
+slug: Web/CSS/::details-content
+page-type: css-pseudo-element
+browser-compat: css.selectors.details-content
+---
+
+{{CSSRef}}
+
+The **`::details-content`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the contents of an {{HTMLElement("details") }}.
+
+{{EmbedInteractiveExample("pages/tabbed/pseudo-element-details-content.html", "tabbed-shorter")}}
+
+## Syntax
+
+```css
+selector::details-content
+```
+
+## Examples
+
+### Basic example
+
+#### HTML
+
+```html
+<details>
+  <summary>Click me</summary>
+  <p>Here is some content</p>
+</details>
+```
+
+#### CSS
+
+```css
+details::details-content {
+  background-color: #a29bfe;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`<details>`](/en-US/docs/Web/HTML/Element/details)

From 02cc081902b9dd964d398849821e98fc59a3b409 Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Tue, 10 Dec 2024 22:06:49 +0000
Subject: [PATCH 2/3] Address comments

---
 .../css/_doublecolon_details-content/index.md | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/_doublecolon_details-content/index.md b/files/en-us/web/css/_doublecolon_details-content/index.md
index aa415b193a143cb..51ba1066e51cfa0 100644
--- a/files/en-us/web/css/_doublecolon_details-content/index.md
+++ b/files/en-us/web/css/_doublecolon_details-content/index.md
@@ -7,9 +7,9 @@ browser-compat: css.selectors.details-content
 
 {{CSSRef}}
 
-The **`::details-content`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the contents of an {{HTMLElement("details") }}.
+The **`::details-content`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the expandable/collapsible contents of a {{HTMLElement("details")}} element.
 
-{{EmbedInteractiveExample("pages/tabbed/pseudo-element-details-content.html", "tabbed-shorter")}}
+[//]: # '{{EmbedInteractiveExample("pages/tabbed/pseudo-element-details-content.html", "tabbed-shorter")}}'
 
 ## Syntax
 
@@ -38,6 +38,40 @@ details::details-content {
 }
 ```
 
+#### Result
+
+{{EmbedLiveSample("Basic_example", "100%", 150)}}
+
+### Transition example
+
+#### HTML
+
+```html
+<details>
+  <summary>Click me</summary>
+  <p>Here is some content</p>
+</details>
+```
+
+#### CSS
+
+```css
+details::details-content {
+  opacity: 0;
+  transition:
+    content-visibility 300ms allow-discrete,
+    opacity 300ms;
+}
+
+details[open]::details-content {
+  opacity: 1;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample("Transition_example", "100%", 150)}}
+
 ## Specifications
 
 {{Specifications}}
@@ -49,3 +83,4 @@ details::details-content {
 ## See also
 
 - [`<details>`](/en-US/docs/Web/HTML/Element/details)
+- [`<summary>`](/en-US/docs/Web/HTML/Element/summary)

From 0c50bde382b0552d825af20149190d690298a884 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Wed, 11 Dec 2024 09:14:56 +0000
Subject: [PATCH 3/3] Add example descriptions

---
 .../web/css/_doublecolon_details-content/index.md     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/_doublecolon_details-content/index.md b/files/en-us/web/css/_doublecolon_details-content/index.md
index 51ba1066e51cfa0..ff6e0bb0e3473b8 100644
--- a/files/en-us/web/css/_doublecolon_details-content/index.md
+++ b/files/en-us/web/css/_doublecolon_details-content/index.md
@@ -21,6 +21,8 @@ selector::details-content
 
 ### Basic example
 
+In this example the `::details-content` pseudo-element is used to set a {{cssxref("background-color")}} on the content of the {{HTMLElement("details")}} element.
+
 #### HTML
 
 ```html
@@ -44,6 +46,11 @@ details::details-content {
 
 ### Transition example
 
+In this example the `::details-content` pseudo-element is used to set a {{cssxref("transition")}} on the content of the {{HTMLElement("details")}} element so that it smoothly fades into view when expanded, and fades out again when collapsed. To achieve this, two separate transitions are specified inside the `transition` shorthand property:
+
+- The {{cssxref("opacity")}} property is given a basic transition over `600ms` to create the fade-in/fade-out effect.
+- The {{cssxref("content-visibility")}} property (which is toggled between `hidden` and `visible` when the `<details>` content is expanded/collapsed) is also given a basic `600ms` transition, but with the {{cssxref("transition-behavior")}} value `allow-discrete` specified. This opts the browser into having a transition started on `content-visibility`, the animation behavior of which is [discrete](/en-US/docs/Web/CSS/CSS_animated_properties#discrete). The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the `<details>` content was collapsed — you wouldn't see the smooth fade-out.
+
 #### HTML
 
 ```html
@@ -59,8 +66,8 @@ details::details-content {
 details::details-content {
   opacity: 0;
   transition:
-    content-visibility 300ms allow-discrete,
-    opacity 300ms;
+    opacity 600ms,
+    content-visibility 600ms allow-discrete;
 }
 
 details[open]::details-content {