Link underline with rollover

link.scss

a {
  background-position: top center;
  background-image: linear-gradient(to bottom, rgba(177,49,49,0) 50%, rgba(177,49,49,1) 50%);
  background-size: 100% 200%;
  border-bottom: 2px solid #b13131;
  color: #b13131;
  display: inline-block;
  padding: 0 .25rem;
  text-decoration: none;
  transition: all .125s ease-in-out;
    
  &:hover {
    background-position: bottom center;
    color: #eee;
  }
}