diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index fb6bbe5..d37a1ce 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -23,7 +23,33 @@
 		#}
 
 		{#- Add an arbitrary string to the bundle #}
-		{%- css %}* { box-sizing: border-box; }{% endcss %}
+		{%- css %}
+* { box-sizing: border-box; }
+
+heading-anchors a[href^="#"] {
+	color: transparent;
+	display: inline-block;
+	margin-inline-start: 0.375ch;
+	max-inline-size: 1ch;
+	overflow-x: hidden;
+	pointer-events: none;
+	text-decoration: none;
+	vertical-align: bottom;
+	white-space: nowrap;
+}
+
+heading-anchors a[href^="#"]::before {
+	content: "#";
+	color: var(--text-color-link);
+	pointer-events: auto;
+}
+
+heading-anchors a[href^="#"]:focus::before,
+heading-anchors a[href^="#"]:hover::before {
+	color: var(--text-color-link-highlight);
+	text-decoration: underline;
+}
+			{% endcss %}
 		{#- Add the contents of a file to the bundle #}
 		{%- css %}{% include "public/css/index.css" %}{% endcss %}
 		
@@ -60,7 +86,9 @@
 			</header>
 
 			<main id="skip">
-				{{ content | safe }}
+				<heading-anchors position="beforeend">
+					{{ content | safe }}
+				</heading-anchors>
 			</main>
 
 			<footer>
@@ -158,6 +186,8 @@ activateColorScheme();
 			{% endjs %}
 			{% endif %}
 
+			<script type="module" src="/js/heading-anchors.js"></script>
+
 			{#
 				getBundleFileUrl Writes the bundle content to a content-hashed file location in your 
 				output directory and returns the URL to the file for use.
diff --git a/eleventy.config.js b/eleventy.config.js
index 8ced8b4..b1f7944 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -15,6 +15,8 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({
 		"./public/": "/",
 		"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css",
+		"./node_modules/@daviddarnes/heading-anchors/heading-anchors.js":
+			"/js/heading-anchors.js",
 	});
 
 	// Run Eleventy when these files change:
diff --git a/package.json b/package.json
index faf46b2..a2a3bcb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "eleventeen",
-	"version": "9.2.20-alpha.17",
+	"version": "9.2.21-alpha.17",
 	"description": "Starter repository for a website built with Eleventy + eleventeen",
 	"type": "module",
 	"scripts": {
@@ -45,6 +45,7 @@
 		"@11ty/eleventy-plugin-bundle": "^2.0.2",
 		"@11ty/eleventy-plugin-rss": "^2.0.2",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+		"@daviddarnes/heading-anchors": "^2.0.0",
 		"@famebot/chromagen": "^1.0.1",
 		"luxon": "^3.4.4"
 	}
diff --git a/public/css/index.css b/public/css/index.css
index 1eea865..f83f9d3 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -435,31 +435,3 @@ header {
 .post-metadata time {
 	margin-inline-end: 1em;
 }
-
-/* Direct Links / Markdown Headers
-.header-anchor {
-	text-decoration: none;
-	font-style: normal;
-	font-size: 1em;
-	margin-inline-start: 0.1em;
-}
-
-a.header-anchor,
-a.header-anchor:visited {
-	color: transparent;
-}
-
-a.header-anchor:focus,
-a.header-anchor:hover {
-	text-decoration: underline;
-}
-
-a.header-anchor:focus,
-:hover > a.header-anchor {
-	color: var(--text-color-link-highlight);
-}
-
-h2 + .header-anchor {
-	font-size: 1.5em;
-}
-*/