From a940fc7502da7cf846bb5f447e8ed0adca092d2a Mon Sep 17 00:00:00 2001
From: Luke Warlow <luke@warlow.dev>
Date: Mon, 3 Mar 2025 14:07:35 +0000
Subject: [PATCH] Add live example for `::details-content`

---
 .../css/_doublecolon_details-content/index.md | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

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 9e96d54cd21feed..49098d097f9fc7b 100644
--- a/files/en-us/web/css/_doublecolon_details-content/index.md
+++ b/files/en-us/web/css/_doublecolon_details-content/index.md
@@ -9,7 +9,26 @@ browser-compat: css.selectors.details-content
 
 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")}}'
+{{InteractiveExample("CSS Demo: ::details-content", "tabbed-shorter")}}
+
+```css interactive-example
+details[open]::details-content {
+  color: dodgerblue;
+  padding: 0.5em;
+  border: thin solid grey;
+}
+```
+
+```html interactive-example
+<details open>
+  <summary>Example summary</summary>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  <p>
+    Architecto cupiditate ea optio modi quas sequi, esse libero asperiores
+    debitis eveniet commodi hic ad.
+  </p>
+</details>
+```
 
 ## Syntax