Underline

Extends underline utility class for easy underline animations.

View Source 

.underline {
  text-underline-offset: var(--default-underline-offset, 0.125em);
}

.underline-transparent {
  &:where(:any-link, button:enabled, [role="button"]) {
    transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);

    &:not(:hover, :focus-visible) {
      text-underline-offset: var(--default-underline-transparent-offset, -0.25em);
      text-decoration-color: transparent;
    }
  }
}

Example

<a href="#" class="underline transition hover:text-primary" title="">
    Link Default
</a>
<a href="#" class="text-primary underline underline-transparent" title="">
    Link Primary
</a>