JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et nisl varius maximus at sed magna. Donec a augue magna. <a href="#">In cursus eros quam, sed volutpat lectus</a> cursus sit amet. Proin quis malesuada arcu. Nullam venenatis condimentum tellus nec volutpat. Curabitur ipsum nisl, varius vel porttitor quis, eleifend porttitor lorem. Maecenas lacinia ipsum maximus laoreet viverra. Curabitur finibus enim vel massa mattis, dignissim tempor augue condimentum. Vivamus eu tellus at nibh pellentesque rutrum. Ut arcu turpis, viverra id blandit a, ornare id sapien. Sed in est eget nunc placerat luctus ut nec massa. Proin vitae ullamcorper enim.</p>

<p>
  Proin mi massa, varius nec luctus non, facilisis ullamcorper massa. Nunc ligula sem, porttitor sit amet libero blandit, <a href="#">dignissim dapibus eros. Aenean pharetra mi eu nisl porta imperdiet. Morbi porta dictum enim, non aliquet metus lobortis sodales. Nam sit amet dolor tempus, venenatis odio sit amet, consectetur diam.</a> Vivamus turpis nibh, mollis id purus in, vulputate porttitor turpis. In elementum tortor quis libero venenatis varius eu consequat libero.
</p>

CSS

a {
    text-decoration: none;
    background-image: linear-gradient(to right, #f00, #f00 50%, #0f0 50%, #0f0);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 200% 2px;
    transition: background-position .3s;
}

a:hover, a:focus {
    background-position: 0 100%;
}