A mixin for a stylish underline text effect

.link-underline-mixin.less

.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%;
    & when (@centered = true) {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &:hover {
    &:before {
      width: 0;
    }
  }
}