<main>
  <h2>Animated Underline on Hover with CSS</h2>
  
  <p>Hover over the list of links below to see the animation on each link.</p>
  
  <ul class="li3">
    <li><a href="#">Link Number One</a></li>
    <li><a href="#">Link Number Two</a></li>
    <li><a href="#">The Third Link</a></li>
    <li><a href="#">Number Four</a></li>
    <li><a href="#">Here's Five</a></li>
  </ul>

</main>

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
  background: #ffd1d1;
  color: black;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  padding: 0 20px;
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 400px;
}

ul li {
  padding-bottom: 14px;
}

a, a:link, a:visited {
  color: black;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  padding-bottom: 6px;
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, hotpink, purple);
  background-size: 0 4px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size .3s ease-in;
  /* Change the transition timing above
     to determine how long the animation takes.
     Change the the timing function to adjust
     the style of the animation. */
}

a:hover::before {
  background-size: 100% 4px;
}

let links = document.querySelectorAll('a');

for (i of links) {
  (function(i) {
    i.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  })(i);
}