SOURCE

<div class="container">
    <div class="hover">hover</div>
</div>

.container{
    height: 500px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hover{
    align-items: center;
    background-color: transparent;
    background-image: linear-gradient(270deg,transparent ,#b580ff 50%);
    background-position: 200% calc(100% - 1px);
    background-repeat: no-repeat;
    background-size: 200% 3px;
    display: flex;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    transition: all .5s ease-in-out;
}
.hover:hover{
    background-position: 0 calc(100% - 1px);
    color: red;
    text-decoration: none;
}