diff --git a/live-examples/html-examples/text-content/blockquote.html b/live-examples/html-examples/text-content/blockquote.html
index ea5cd3312..a2b70e251 100644
--- a/live-examples/html-examples/text-content/blockquote.html
+++ b/live-examples/html-examples/text-content/blockquote.html
@@ -1,4 +1,6 @@
-<blockquote cite="https://www.huxley.net/bnw/four.html">
-  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
-  <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
-</blockquote>
+<div>
+  <blockquote cite="https://www.huxley.net/bnw/four.html">
+    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
+  </blockquote>
+  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
+</div>
diff --git a/live-examples/html-examples/text-content/css/blockquote.css b/live-examples/html-examples/text-content/css/blockquote.css
index 75ea5ef1a..220b4d43c 100644
--- a/live-examples/html-examples/text-content/css/blockquote.css
+++ b/live-examples/html-examples/text-content/css/blockquote.css
@@ -1,10 +1,7 @@
-blockquote {
-  margin: 0;
-}
-
-blockquote p {
+div:has(> blockquote) {
+  background-color: #ededed;
+  margin: 10px auto;
   padding: 15px;
-  background: #eee;
   border-radius: 5px;
 }
 
@@ -15,3 +12,7 @@ blockquote p::before {
 blockquote p::after {
   content: '\201D';
 }
+
+blockquote + p {
+  text-align: right;
+}