JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<span id="highlight">Some text here that you want to highlight from left to right...</span>
<p><a href="#" onclick="highlit()">Highlight the above text</a></p>

CSS

span
{
    background: white;
    background: linear-gradient(to right, yellow 50%, white 50%);
    background-position: right bottom;
    background-size: 200% 100%;
    transition:all 3s ease;
}

JavaScript

$(document).ready(function()
{
    $("a").click(function(){
    $("#highlight").css("background-position","left bottom");
    });
});