Skip to content
😐 A carefully crafted, pixel-perfect, medium-like underline (SCSS Mixin)
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
underline.scss

README.md

UNDERLINE.SCSS

UNDERLINE.SCSS is a carefully crafted, pixel-perfect, medium-like underline, inspired by Marcin Wichary's post - Crafting link underlines on Medium.

Settings:

$text-color: black !default;
$text-color-active: rgba($text-color, .8) !default;
$underline-color: $text-color !default;
$underline-color-active: $text-color-active !default;
$background-color: white !default;
$underline-width: 1px !default;
$underline-offset: 2px !default;
$breaking-underlines: true !default;

The Mixin:

@mixin underline($color: $underline-color, $weight: $underline-width, $offset: $underline-offset) {
  background-image: linear-gradient(to top, transparent, transparent $offset, $color $offset, $color ($offset + $weight), transparent ($offset + $weight));
}

Usage:

a {
  color: $text-color;
  transition: .2s;
  text-decoration: none;
  position: relative;

  @if $breaking-underlines {
    text-shadow: (-1px) -1px 0 $background-color, 1px -1px 0 $background-color, -1px 1px 0 $background-color, 1px 1px 0 $background-color;
  }

  @include underline($text-color);

  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    @include underline($text-color, .5);
  }

  &:hover, &:focus {
    color: $text-color-active;
    text-decoration: none;

    @include underline($text-color-active);

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
      @include underline($text-color-active, .5);
    }
  }
}

<3

Analytics

You can’t perform that action at this time.