Create a link hover style

index.html

  <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item two</a></li>
    <li><a href="">Item three</a></li>
    <li><a href="">Item4</a></li>
    <li><a href="">Item5</a></li>
    <li><a href="">Item6</a></li>
    <li><a href="">Item7</a></li>
    <li><a href="">Item8</a></li>
  </ul>
  
  
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nobis, officiis deleniti dicta molestiae illum in maiores commodi optio rem vero, excepturi nulla iste reprehenderit corporis perferendis praesentium provident quis? Ab similique neque natus, doloremque itaque provident tempore reprehenderit consequatur et beatae dicta mollitia illo, aliquid voluptate necessitatibus dolorem minus explicabo eos <a href="">praesen tium</a>! Ipsa fuga temporibus nemo mollitia blanditiis itaque quibusdam quia aliquid architecto recusandae. Tenetur aliquid cupiditate animi officiis ducimus porro harum deleniti voluptate totam! Velit cupiditate dolor molestiae, fugiat, optio maiores reiciendis voluptatem <a href="">pra esen hello world</a> aspernatur non mollitia praesentium. Repellat quos et deleniti ut illo accusantium facere magnam veniam quidem aliquid veritatis natus eligendi aspernatur <a href="">praesentium</a> blanditiis cupiditate molestiae nostrum, aperiam cum fugiat. Saepe deleniti numquam fugit nostrum aperiam repellat voluptas. Sapiente, dignissimos magnam. </p>

index.js

const triggers = document.querySelectorAll('a')
const highlight = document.createElement('span')
highlight.classList.add('highlight')

document.body.append( highlight );

  
  
function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX,
  }
  
  highlight.style.width = `${coords.width}px`;
  highlight.style.height = `${coords.height}px`;
  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}



triggers.forEach( a=> a.addEventListener( 'mouseenter', highlightLink ) ) 

style.css

a {
  display: inline-block;
}

.highlight {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: #f0f0f0;
  z-index: -1;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
    border-bottom: 2px solid #000;
  transition: all 0.2s;
}