Underline

Extends underline utility class for easy link animations.

css

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

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

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

Example

html

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

Underline ​

Example ​

Underline

Example