A mixin for a stylish underline text effect

link-underline-mixin.scss

@mixin link-underline($color: blue, $size: 2px, $duration: 0.25s,  $centered: false) {
  color: $color;
  display: inline-block;
  position: relative;
  text-decoration: none; 
  &:before {
    background-color: $color;
    content: '';
    height: $size;
    position: absolute;
    bottom: 0 - ($size/2);
    transition: width $duration ease-in-out;
    width: 100%;
    @if $centered == 'true' {
      left: 50%;
      transform: translateX(-50%); 
    }
  }
  &:hover {
    &:before {
      width: 0;
    }
  }
}