BorderLeftRight

BorderLeftRight

HTML :

    <div class="borderLeftRight">
        Hover Me
    </div>

CSS :

    .borderLeftRight {
        display: inline-block;
        position: relative;
        color: #474E51;
    }

    .borderLeftRight::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #5878F3;
        transform-origin: bottom right;
        transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }

    .borderLeftRight:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }