Consistent underlines using gradients

_underline.scss

/*
 * Consistent underlines using gradients
 * https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9
 */

@mixin underline($colour:currentColor, $line-offset:1, $line-size:0.1) {
  text-decoration: none;
  background-repeat: repeat-x;
  background-size: #{$line-size}em #{$line-size}em;
  background-position: 0 #{$line-offset}em;
  background-image: -webkit-linear-gradient(top, transparent 50%, $colour 50%);
  background-image: linear-gradient(top, transparent 50%, $colour 50%);

  // IE < 10 doesn't get it
  .lt-ie10 & {
    background: none;
    text-decoration: underline;
  }
}