diff --git a/.gitignore b/.gitignore
index 6635cf5..3249896 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+**/_test.*
\ No newline at end of file
diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte
index a51b650..7a5bb70 100644
--- a/src/lib/Post.svelte
+++ b/src/lib/Post.svelte
@@ -62,22 +62,31 @@
     .footer a {
         display: flex;
         align-items: center;
-        gap: 1rem;
+        gap: 0.45em;
 
-        font-size: 0.9rem;
+        font-size: 1rem;
         color: var(--content-color-faded);
-        text-decoration: none;
+        text-decoration: underline;
+        text-underline-offset: 0.25em;
+        text-decoration-color: transparent;
 
         transition: 150ms;
-        will-change: transform;
     }
     .footer a:hover {
+        text-decoration-color: currentColor;
         text-decoration: underline;
-        transform: scale(1.15);
     }
 
     .footer svg {
-        width: 1.5em;
+        width: 1em;
+        transition: 150ms;
+    }
+
+    a.prev:hover svg {
+        transform: translateX(-50%);
+    }
+    a.next:hover svg {
+        transform: translateX(50%);
     }
 </style>
 
@@ -104,8 +113,8 @@
 
     <div class="footer">
         {#if prev}
-            <a href="/{prev}" data-sveltekit-preload-data="hover">
-                <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">
+            <a href="/{prev}" class="prev" data-sveltekit-preload-data="hover">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                 </svg>
                 Previous
@@ -114,9 +123,9 @@
 
         {#if next}
             <!-- we use margin-left rather than justify-content so it works regardless of whether the "previous" link exists -->
-            <a href="/{next}" style="margin-left: auto;" data-sveltekit-preload-data="hover">
+            <a href="/{next}" class="next" style="margin-left: auto;" data-sveltekit-preload-data="hover">
                 Next
-                <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">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                 </svg>
             </a>