scss-link-underline

A Sass Mixin Based on Adam Schwartz's "Smarter Link Underlines for Every Website"

What?

scss-link-underline is a Sass library for creating beautiful and consistent link underlines across systems.

Why?

As browsers continue to change, update, and improve over time, inconsistencies between them increase. For example, Google Chrome by default now displays "smarter" link underlines, but Mozilla Firefox still displays the classic underline of yesteryear.

This library ensures consistency across all browser, but best of all it guarantees that all of your links will look great and are easy to read.

How to install

• With yarn: yarn add --dev scss-link-underline
• With npm: npm install --dev scss-link-underline
• Manually: download this file

Usage

The mixin takes in the following parameters:

• background color
• text color
• selection color (highlight color)
• underline boldness (defaults to normal)

a {
  @include link-underline(
    $color-background,
    $color-text,
    $color-selection,
    $underline-boldness: 'normal'
  );
}

Normal Underline:

Input:

a {
  @include link-underline(#fff, #000, #b4d5fe);
}

Output:

Bold Underline:

Input:

a {
  @include link-underline(#fff, #000, #b4d5fe, 'bold');
}

Output:

Limitations

1. It requires that the text be on top of a solid background color.
2. On mobile and older browsers, it may have minor performance penalties. In our testing, we didn’t find much if any impact, especially since the text-shadows don’t use any spread value. But since you’re drawing new things that didn’t used to be there, it’s worth noting.