JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<p>
<a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maiores dolorem reprehenderit minus veniam, ex inventore laudantium saepe dicta obcaecati corrupti culpa explicabo eveniet. Explicabo amet culpa accusantium cum adipisci?</a>
</p>

<p>
<a href="">Lorem ipsum dolor</a>
</p>

CSS

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

a:hover {
    background-size: 100% 2px;
}