diff --git a/assets/css/post-single.css b/assets/css/post-single.css
index d46cb83d..f93e8d1a 100644
--- a/assets/css/post-single.css
+++ b/assets/css/post-single.css
@@ -315,6 +315,18 @@
     transform: scale(0.96);
 }
 
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+    display: inline-flex;
+    color: var(--secondary);
+    margin-inline-start: 8px;
+    font-weight: 500;
+}
+
 @media screen and (max-width: 600px) {
     .post-content blockquote {
         margin: 0 calc(var(--gap) * -1);
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d4476eda..e46d05fe 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -41,7 +41,9 @@
     </details>
   </div>
   {{- end }}
-  <div class="post-content">{{ .Content }}</div>
+  <div class="post-content">
+    {{- partial "anchored_headings.html" .Content -}}
+  </div>
   <footer class="post-footer">
     {{- if .Params.tags }}
     <ul class="post-tags">
diff --git a/layouts/partials/anchored_headings.html b/layouts/partials/anchored_headings.html
index 62a50842..27184fea 100644
--- a/layouts/partials/anchored_headings.html
+++ b/layouts/partials/anchored_headings.html
@@ -1,2 +1,2 @@
 <!-- formats .Content headings by adding an anchor -->
-{{ . | replaceRE "(<h[2-3] id=\"([^\"]+)\".+)(</h[2-9]+>)" "${1}<a class=\"anchor\" href=\"#${2}\">#</a>${3}" | safeHTML }}
+{{ . | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" "${1}<a hidden class=\"anchor\" aria-hidden=\"true\" href=\"#${2}\">#</a>${3}" | safeHTML }}