JSFiddle - React, Tailwind, and code Playground

HTML

<div id="elem">
★★★★★
</div>

CSS

div{
  font-size:40px;
  display:inline-block;
  padding:10px;

}
div:hover{
  cursor:pointer;
}

JavaScript

let elem = document.getElementById('elem');
 elem.onmousemove=function coordinate(event) { 
     var x = event.clientX; 
     console.log(elem.clientWidth); 
    event.target.style = 'background:linear-gradient(to right, yellow '+x+'px, black '+x+'px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;';
  }