diff --git a/Base/res/html/misc/pseudo-elements.html b/Base/res/html/misc/pseudo-elements.html
new file mode 100644
index 0000000000..e0f98f3cc2
--- /dev/null
+++ b/Base/res/html/misc/pseudo-elements.html
@@ -0,0 +1,70 @@
+<!--
+  ~ Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+  ~
+  ~ SPDX-License-Identifier: BSD-2-Clause
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pseudo-elements</title>
+    <style>
+        p {
+            border: 1px solid black;
+            padding: 0.5em;
+        }
+
+        .quote::before {
+            content: open-quote;
+            font-size: 2em;
+        }
+        .quote::after {
+            content: close-quote;
+            font-size: 2em;
+        }
+
+        a.heart::before {
+            content: url("custom-list-item.png");
+        }
+        a.page::before {
+            content: url("custom-list-item-2.png");
+        }
+        a.face::before {
+            content: url("background-repeat.png") / ":^)";
+        }
+
+        .inline:hover::before {
+            background: yellow;
+        }
+        .inline::before {
+            content: "This sentence is first, and will turn yellow if you hover the paragraph.";
+            color: blue;
+        }
+        .inline::after {
+            content: "This sentence is last, still in the same paragraph.";
+            color: red;
+        }
+
+        .block::before {
+            display: block;
+            content: "This should appear as a block, first.";
+            color: blue;
+        }
+        .block::after {
+            display: block;
+            content: "This should appear as a block, last.";
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    <h1>::before and ::after</h1>
+    <p class="quote">This should have chonky quotation marks.</p>
+    <p>
+        This is some text. Each <a href="#" class="heart">link</a> should have a little <a href="#" class="page">icon</a> before it, <a href="#" class="face">and this one has a tooltip too.</a>
+    </p>
+    <p class="inline">There should be a sentence before this, and one after, forming a single paragraph.</p>
+    <p class="block">There should be a sentence before this, and one after, each as its own block.</p>
+</body>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 3cd6292dd1..3043c1e1d9 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -133,6 +133,7 @@
             <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
             <li><a href="cascade-keywords.html">Cascade keywords (initial, inherit, unset)</a></li>
             <li><a href="inline-node.html">Styling "inline" elements</a></li>
+            <li><a href="pseudo-elements.html">Pseudo-elements (::before, ::after, etc)</a></li>
         </ul>
 
         <h2>JavaScript/Wasm</h2>
