Change link styling

src/assets/style.scss

@@ -6,6 +6,8 @@ $logo-size: 216;
 $factor: 1 / ($logo-size / 500);
 
 $highlight: #ff005f;
+$highlight-1: #ff005f11;
+$highlight-2: #ff005f22;
 
 @import 'ibm-plex/css/ibm-plex.scss';
 
@@ -49,6 +51,25 @@ p {
 
 a {
   color: $highlight;
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: -.3em;
+    right: -.3em;
+    background: $highlight-1;
+    transition: .2s background ease-in;
+  }
+
+  &:hover:before {
+    background: $highlight-2;
+  }
 }
 
 .ten-print {