diff --git a/src/lib/Heading.svelte b/src/lib/Heading.svelte
index fa477ba..ef3ecef 100644
--- a/src/lib/Heading.svelte
+++ b/src/lib/Heading.svelte
@@ -7,9 +7,16 @@
 
 <style lang="scss">
 
+    .h {
+        position: relative;
+    }
+
     .before {
-        padding-right: 0.25em;
-        margin-left: -1.25em;
+        /* slightly overlap the span with the heading so that it doesn't
+        lose its hover state as the cursor moves between them */
+        position: absolute;
+        padding-right: 0.5em;
+        left: -1.25em;
 
         @media(max-width: 58rem) {
             display: none;
@@ -58,9 +65,14 @@
         <a href="#{id}">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
-            </svg></a></span><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
+            </svg>
+        </a>
+    </span>
+
+    <span>
         <slot></slot>
     </span>
+
     <!-- Icon from https://heroicons.com/ -->
     <a href="#{id}" class="after">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">