How to create multiline text underline animation in css

In this post we will learn how to create multiline text underline animation using css. Multiline text undeline animation is useful with :hover effect to highlight text. For creating this animatino here we use use background-image property.

For creating underline we create gradient so like that only text below part is visible and works as a underline. for example