animated border gradient css
<p class="text">Lorem ipsum dolor sit amet,
<span class="text__inner">
consectetur adipisicing elit. Voluptates asperiores
officiis similique ut id
</span>
accusantium fugit. Amet quod debitis sed tempore
</p>
<style>
.text{ font-size: 2rem; }
.text__inner {
color: currentcolor;
background-image: linear-gradient(90deg, red, blue);
background-size: 0% 3px;
background-repeat:no-repeat;
background-position: left bottom;
transition: background-size ease-in 500ms;
}
.text__inner:hover { background-size: 100% 3px; }
</style>