<div class="container">
        <p>Lorem ipsum dolor sit amet, <a href="#" class="anima">consectetur adipisicing</a> elit. Id provident ea reiciendis omnis corporis inventore vitae, dicta voluptatum architecto, aperiam quam quidem eaque, cupiditate illum? Provident possimus unde in culpa, excepturi laborum rem accusantium fugiat repellat. Similique dignissimos exercitationem vel aperiam enim, incidunt, quae unde illum corrupti doloremque id quos blanditiis eos facilis dolor quod? Reprehenderit sit laudantium placeat est nisi omnis. Corrupti praesentium saepe, quisquam delectus dolores autem impedit veritatis deserunt rem temporibus officia dignissimos sed, fugit id fuga hic reprehenderit ullam quos aut fugiat quam, laudantium sapiente. Delectus repudiandae mollitia, atque explicabo itaque voluptate. Quisquam laboriosam molestias officiis?</p>
    </div>

.anima {
background-image: linear-gradient(120deg, red, blue 100%);
background-repeat: no-repeat;
background-size: 100% 5px;
background-position: 0 80%;
 
transition: background-size 100ms ease-in;
color: #000;
text-decoration: none;
}
 
.anima:hover{
    background-size: 100% 100% !important;
    color: #fff;
}