Skip to content

Underline

Adds a few default values to underline utility class for easy link animations.

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

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

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

    &:is(:hover, :focus) {
      text-decoration-color: currentColor;
    }
  }
}

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>

Released under the MIT License.