JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<h2>
<a href="#">Health Plan</a><br>
<a href="#">Flexible Benefits</a><br>
<a href="#">Life and AD&amp;D Insurance</a><br>
<a href="#">Additional Programs and Services</a><br>
<a href="#">Qualifying Life Events</a><br>
<a href="#">Did You Know?</a><br>
<a href="#">Forms</a><br>
<a href="#">Document Library</a><br>
<a href="#">Annual Notices</a><br>
<a href="#">Contact Us</a><br>
<a href="#">Give Us Feedback or Report a Website Issue</a>











</h2>

CSS

@import url('https://fonts.googleapis.com/css?family=Muli');

a {
  text-decoration: none;
  font-family: Muli;
  font-size: 18px;
  position: relative;
  color: #000;
  line-height: 40px;
}

a:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #007acc;
  transition: 0.15s;
}

a:hover:after {
  width: 100%;
  
  

}