JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="wrap">
  <ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
  </ul>
  <div id="line"></div>
</div>

CSS

#wrap{
  position: relative;
  display: inline-block;
  background: #ff0;
}
#line{
  position: absolute;
  left:-100%;
  width: 100%;
  height: 3px;
  background: #333;
  transform:translate(0,0);
  transition:transform .15s;
}
li{
  display: inline-block;
  position: relative;
  margin:20px;
  overflow:hidden;
}

li a{
  color:#333;
  text-decoration: none;
}

JavaScript

var line = $('#line');
$('#wrap').on('mousemove', function(e){
  line.css('transform', 'translate(' + e.clientX + 'px, 0)');
});
$('#wrap').on('mouseout', function(){
  line.css('transform', 'translate(0, 0)');
});