Fixing arrow hover effect on links for Chrome

assets/scss/_dark.scss

@@ -15,12 +15,12 @@
             }
         }
     }
-    a {
+    a,
+    b {
         color: var(--link-color-dark);
-
-        &:not(.arrow):hover {
-            border-bottom: 2px solid var(--link-color-dark);
-        }
+    }
+    p a:hover {
+        border-bottom: 2px solid var(--link-color-dark);
     }
     main {
         aside {

assets/scss/main.scss

@@ -273,15 +273,13 @@ nav {
     }
 }
 
-a {
+a,
+b {
     color: var(--link-color-normal);
+    font-style: normal;
     position: relative;
     text-decoration: none;
 
-    &:not(.arrow):hover {
-        border-bottom: 2px solid var(--link-color-normal);
-    }
-
     // novelty arrow
     &.arrow::after {
         color: inherit;
@@ -294,9 +292,9 @@ a {
         position: absolute;
         top: 0;
         right: 0;
-        -webkit-transform: translateY(-0.5rem) translateX(100%);
-        -moz-transform: translateY(-0.5rem) translateX(100%);
-        transform: translateY(-0.5rem) translateX(100%);
+        -webkit-transform: translateY(-0.25rem) translateX(100%);
+        -moz-transform: translateY(-0.25rem) translateX(100%);
+        transform: translateY(-0.25rem) translateX(100%);
         transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
     }
 
@@ -304,14 +302,15 @@ a {
     &.arrow.back::after {
         content: $icon-arrow-left;
         left: 0;
-        -webkit-transform: translateY(-0.5rem) translateX(-1.5rem);
-        -moz-transform: translateY(-0.5rem) translateX(-1.5rem);
-        transform: translateY(-0.5rem) translateX(-1.5rem);
+        -webkit-transform: translateY(-0.25rem) translateX(-1.25rem);
+        -moz-transform: translateY(-0.25rem) translateX(-1.25rem);
+        transform: translateY(-0.25rem) translateX(-1.25rem);
         transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
     }
 
     // show the arrow on hover
-    &.arrow:hover::after {
+    &.arrow:hover::after,
+    &.wa:hover b.arrow::after {
         display: block;
         margin-top: -3px;
         opacity: 100;
@@ -329,6 +328,11 @@ a {
     }
 }
 
+// paragraph links
+p a:hover {
+    border-bottom: 2px solid var(--link-color-normal);
+}
+
 // specific link effects
 header h1 a.back::after {
     -webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));

layouts/index.html

@@ -7,7 +7,10 @@
     {{ range .Site.RegularPages }}
         <li>
             <div>
-                <a href="{{ .Permalink }}" class="arrow">{{ .LinkTitle }}</a>
+                <a href="{{ .Permalink }}" class="wa link">
+                    <span>{{ .LinkTitle }}</span>
+                    <b class="arrow"></b>
+                </a>
             </div>
             <time>
                 {{ .PublishDate.Format "January 2006" }}