Animated border on Link Hover

by anoopsuda

HTML

<p>
Lorem ipsum dolor sit amet, <a href="#" class="fancyLink">consectetur adipiscing elit, sed do eiusmod tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
</p>

CSS

p {
  font-weight:bold;
}
a.fancyLink {
  color:red;
     text-decoration: none;
      background-image: linear-gradient(
90deg, red, blue);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 300ms ease;
}
a.fancyLink:hover {
  background-size: 100% 2px;
}