Better` text-decoration: underline` control

_underline.scss

/*
  usage:

  ---
  a.link {
    @include underline(red, 1px, 5px, true)
  }

  ---
  above renders a red 'underline' with a 1px width, offsetted 5px from the bottom of
  its parent.
  param $color: the color of the stroke
  param $thickness: width of the stroke
  param $offset: distance from text to stroke
  param $round-cap: toggle round-capped line
 */
@mixin underline($color: #000, $thickness: 1px, $offset: 3px, $round-cap: false) {
  position: relative;
  text-decoration: none;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -#{$offset};
    width: 100%;
    @if not $round-cap {
      border-bottom: $thickness solid $color;
    } @else {
      height: $thickness;
      background-color: $color;
      border-radius: $thickness*2;
    }
  }
}

a codepen link would be nice

@yairEO I got it here:

https://codepen.io/automagisch/pen/qyaezX

Also added a new 'rounded line cap' flag for obvious reasons :)