SCSS mixin for perfect text underlines

custom-underline.scss

// Adapted from the super-awesome technique described here:
// http://www.acusti.ca/blog/2014/11/28/towards-a-more-perfect-link-underline/

@mixin custom-underline($color, $underline-color, $hover-color, $hover-underline-color, $bg-color) {
  color: $color;
  text-decoration: none;
  // Underline via gradient background
  background-image: linear-gradient($underline-color 0%, $underline-color 100%);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 95%;
  // Tweak position + thickness for high res (1.75x and up) displays
  @media (-webkit-min-device-pixel-ratio: 1.75),
         (min-resolution: 168dpi) {
    background-image: linear-gradient($underline-color 0%, $underline-color 100%);
    background-position: 0 93%;
  }
  // Clear descendors from underline
  text-shadow:
    2px 0.5px $bg-color, 1px 0.5px $bg-color, -1px 0.5px $bg-color, -2px 0.5px $bg-color,
    2px 0 $bg-color, 1px 0 $bg-color, -1px 0 $bg-color, -2px 0 $bg-color,
    2px -0.5px $bg-color, 1px -0.5px $bg-color, -1px -0.5px $bg-color, -2px -0.5px $bg-color;
  &:hover {
    text-decoration: none;
    color: $hover-color;
    background-image: linear-gradient(to bottom, $hover-underline-color 0%, $hover-underline-color 100%);
  }
  // Style selected links (or else text-shadow makes it look crazy ugly)
  // Pseudo selectors must go separately, or they break each other
  &,
  > * {
    &::selection {
      text-shadow: none;
    }
    &::-moz-selection {
      text-shadow: none;
    }
  }
}

@mixin remove-custom-underline {
  color: auto;
  background-image: none;
  text-shadow: none;
}