diff --git a/live-examples/css-examples/pseudo-element/details-content.css b/live-examples/css-examples/pseudo-element/details-content.css
new file mode 100644
index 000000000..e8ae7b426
--- /dev/null
+++ b/live-examples/css-examples/pseudo-element/details-content.css
@@ -0,0 +1,5 @@
+details[open]::details-content {
+  color: dodgerblue;
+  padding: 0.5em;
+  border: thin solid grey;
+}
diff --git a/live-examples/css-examples/pseudo-element/details-content.html b/live-examples/css-examples/pseudo-element/details-content.html
new file mode 100644
index 000000000..ec0b32d02
--- /dev/null
+++ b/live-examples/css-examples/pseudo-element/details-content.html
@@ -0,0 +1,5 @@
+<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>
diff --git a/live-examples/css-examples/pseudo-element/meta.json b/live-examples/css-examples/pseudo-element/meta.json
index a857018c3..f6a44b410 100644
--- a/live-examples/css-examples/pseudo-element/meta.json
+++ b/live-examples/css-examples/pseudo-element/meta.json
@@ -38,6 +38,15 @@
       "defaultTab": "css",
       "height": "tabbed-shorter"
     },
+    "details-content": {
+      "exampleCode": "./live-examples/css-examples/pseudo-element/details-content.html",
+      "cssExampleSrc": "./live-examples/css-examples/pseudo-element/details-content.css",
+      "fileName": "pseudo-element-details-content.html",
+      "title": "HTML Demo: ::details-content",
+      "type": "tabbed",
+      "defaultTab": "css",
+      "height": "tabbed-shorter"
+    },
     "fileSelectorButton": {
       "exampleCode": "./live-examples/css-examples/pseudo-element/file-selector-button.html",
       "cssExampleSrc": "./live-examples/css-examples/pseudo-element/file-selector-button.css",