Remove underlines from links in header component

nhsuk · Feb 14, 2025 · 53d7a48 · 53d7a48
1 parent c2a1539
commit 53d7a48
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -65,12 +65,7 @@
 .nhsuk-header__transactional-service-name--link {
   @include nhsuk-font(19, $line-height: 1.1);
   @include nhsuk-link-style-header;
-  text-decoration: none;
   text-wrap: balance;
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .nhsuk-header__transactional-service-name {
@@ -280,7 +275,6 @@
   // and no underline on the link.
   &[aria-current="page"],
   &[aria-current="true"] {
-    text-decoration: none;
     box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-border-color;
   }
 

diff --git a/packages/core/tools/_links.scss b/packages/core/tools/_links.scss
@@ -71,13 +71,15 @@
   }
 }
 
-/// Header link styling (accounts for different header colour variants)
+/// Header link styling
+/// Removes underline and accounts for different header colour variants
 ///
 /// @example scss
 ///   @include nhsuk-link-style-header;
 
 @mixin nhsuk-link-style-header {
   color: inherit;
+  text-decoration: none;
 
   &:link,
   &:visited,
@@ -86,6 +88,10 @@
     color: inherit;
   }
 
+  &:hover {
+    text-decoration: underline;
+  }
+
   &:focus {
     background-color: $nhsuk-focus-color;
     box-shadow: