diff --git a/src/implementations/vanilla/components/banner/banner.scss b/src/implementations/vanilla/components/banner/banner.scss
index 5eff92446f..01b1619f24 100644
--- a/src/implementations/vanilla/components/banner/banner.scss
+++ b/src/implementations/vanilla/components/banner/banner.scss
@@ -98,7 +98,6 @@ $banner: null !default;
   display: block;
   font: map.get($banner, 'font', 'title', 'mobile');
   margin: 0;
-  text-underline-offset: var(--s-2xs);
 
   &:hover {
     color: map.get($banner, 'text-color', 'dark');
@@ -233,7 +232,6 @@ $banner: null !default;
   .ecl-banner__title,
   .ecl-banner__title-link {
     font: map.get($banner, 'font', 'title', 'tablet');
-    text-underline-offset: var(--s-xs);
   }
 
   .ecl-banner__description,
@@ -293,11 +291,9 @@ $banner: null !default;
   .ecl-banner__title-link {
     display: inline;
     font: map.get($banner, 'font', 'title', 'desktop-m');
-    text-underline-offset: var(--s-2xs);
 
     .ecl-banner--font-l & {
       font: map.get($banner, 'font', 'title', 'desktop-l');
-      text-underline-offset: var(--s-xs);
     }
 
     .ecl-banner--color-light & {
diff --git a/src/implementations/vanilla/components/link/link.scss b/src/implementations/vanilla/components/link/link.scss
index d611a5e38d..d046b4d24b 100644
--- a/src/implementations/vanilla/components/link/link.scss
+++ b/src/implementations/vanilla/components/link/link.scss
@@ -19,6 +19,7 @@ $min-width: 44px; // According to COMM every interactive element should be at le
   font-family: var(--ff-d);
   margin: 0;
   text-decoration: underline;
+  text-underline-offset: 5px;
 
   &:visited {
     color: map.get($link, 'color-visited');
diff --git a/src/implementations/vanilla/components/mega-menu/mega-menu.scss b/src/implementations/vanilla/components/mega-menu/mega-menu.scss
index 1b85f50b03..d72d2954dc 100644
--- a/src/implementations/vanilla/components/mega-menu/mega-menu.scss
+++ b/src/implementations/vanilla/components/mega-menu/mega-menu.scss
@@ -480,7 +480,6 @@ $mega-menu: null !default;
 
   &:hover {
     text-decoration: underline !important;
-    text-underline-offset: var(--s-2xs);
   }
 
   &:focus-visible {
@@ -1165,7 +1164,6 @@ $mega-menu: null !default;
 
           &:hover {
             text-decoration: underline;
-            text-underline-offset: var(--s-2xs);
           }
         }
 
diff --git a/src/implementations/vanilla/components/tag/tag.scss b/src/implementations/vanilla/components/tag/tag.scss
index 64f41f49fc..06443870ca 100644
--- a/src/implementations/vanilla/components/tag/tag.scss
+++ b/src/implementations/vanilla/components/tag/tag.scss
@@ -21,6 +21,7 @@ $tag: null !default;
   padding: map.get($tag, 'padding');
   text-align: left;
   text-decoration: underline;
+  text-underline-offset: 5px;
 
   &:focus-visible {
     background-color: map.get($tag, 'background-color-focus');