Rising Underline on Hover Effect (LESS Mixin)

gistfile1.less

// @example: http://jsbin.com/huharale/1/edit?html,css,output

.rising-underline(@color, @thickness, @distance: 3px) {
    
    position: relative;
    text-decoration: none;
    
    &:after {
        content: "";
        position: absolute;
        bottom: -@distance;
        left: 0;
        width: 100%;
        height: @thickness;
        background-color: @color;
        opacity: 0;
        pointer-events: none;
        transition: all .2s ease-out;
    }

    &:hover:after {
        bottom: 0;
        opacity: 1;
        transition: all .15s ease-out;
    }
}

See an example of usage here: http://jsbin.com/huharale/1/edit?html,css,output