from http://codepen.io/ghepting/pen/tLnHK/ to http://codepen.io/yoanmarchal/pen/zxgNaX

Medium subtle underline SCSS

$background-color: #fff ;
$link-color: #333 ;
$link-color-active: #55abad ;

$link-underline-width: 1px ;
$link-underline-offset: 2px ;

@function link-total($link-underline-width, $link-underline-offset){
  @return $link-underline-width + $link-underline-offset
}

$breaking-underlines: true ;

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

body {
  font-size: 17px;
  max-width: 40em;
  margin: 0 auto;
  padding: 1em;
}

a {
  color: $link-color;
  -moz-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
}
a:hover, a:focus {
  color: $link-color-active;
}

a.custom {
  text-decoration: none;
  position: relative;
  text-shadow: -1px -1px 0 $background-color,
                1px -1px 0 $background-color, 
               -1px 1px 0 $background-color,
                1px 1px 0 $background-color;
  @include underline($link-color, 2px, 3px);

}


@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  a.custom {
    @include underline($link-color, 2px, 2.5px);
  }
}
a.custom:hover, a.custom:focus {
  @include underline($link-color-active, 2px, 3px);
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  a.custom:hover, a.custom:focus {
    @include underline($link-color-active, 2px, 2.5px);
  }
}