diff --git a/sass/_component_link.scss b/sass/_component_link.scss
index 1a597621..68f53a3c 100644
--- a/sass/_component_link.scss
+++ b/sass/_component_link.scss
@@ -1,19 +1,27 @@
+// reminder - Safari does NOT support shorthand for text-decoration
 a {
   color: $link-color;
-  text-decoration: $link-border-color 2px solid underline;
   text-underline-offset: 3px;
+  text-decoration-color: $link-border-color;
+
+  &,
+  &:focus,
+  &:hover,
+  &:active {
+    // additional reset necessary because of some weird `hover` mixin in bootstrap.
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 2px;
+  }
 
   &:focus,
   &:hover {
     color: $link-hover-color;
-    // This is necessary because of some weird `hover` mixin in bootstrap.
-    text-decoration: 2px solid underline;
     text-decoration-color: currentcolor;
   }
 
   &:active {
     color: $link-active-color;
-    text-decoration: 2px solid underline;
     text-decoration-color: currentcolor;
   }
 }
diff --git a/sass/_darkmode.scss b/sass/_darkmode.scss
index 4b57386d..e1c925d8 100644
--- a/sass/_darkmode.scss
+++ b/sass/_darkmode.scss
@@ -20,14 +20,12 @@ body.theme-dark {
 
   .btn-link,
   a {
+    // reminder - Safari does NOT support shorthand for text-decoration
     color: $darkmode-color;
 
     &:focus,
     &:hover {
       color: $link-hover-color;
-      // This is necessary because of some weird `hover` mixin in bootstrap.
-      text-decoration: 2px solid underline;
-      text-decoration-color: currentcolor;
     }
   }