Fancy Underline (LESS Mixin)

fancy-underline.less

/**
 * Based on work by Jonathan Neal.
 * https://codepen.io/jonneal/pen/PzGYEE
 */

@textUnderlineFade: 20%;
@textUnderlineColor: currentColor;
@textUnderlineBackgroundColor: #FFF;
@textUnderlinePosition: -.14em;
@textUnderlineSize: .05em;
@textUnderlineGap: .05em;
@textUnderlineGapMinimum: 2px;

.underline (@bgColor: @textUnderlineBackgroundColor) {
    box-shadow:
        inset 0 calc(@textUnderlinePosition + @textUnderlineSize) 0 0 @bgColor,
        inset 0 @textUnderlinePosition 0 0 fade(@bgColor, @textUnderlineFade),
        inset 0 @textUnderlinePosition 0 0 @textUnderlineColor;
    text-decoration: none;
    text-shadow:
        @textUnderlineGap 0 @bgColor,
        -@textUnderlineGap 0 @bgColor,
        @textUnderlineGapMinimum 0 @bgColor,
        -@textUnderlineGapMinimum 0 @bgColor;
}