<a href="#" class="link left">Анимация слева</a>
<br>
<br>
<a href="#" class="link right">Анимация справа</a>
<br>
<br>
<a href="#" class="link center">Анимация от центра</a>
<br>
<br>
<a href="#" class="link bottom">Анимация снизу</a>
<br>
<br>
<a href="#" class="link top">Анимация сверху</a>

.link {
  position: relative;
  text-decoration: none;
  color: #282c34;
  font-size: 24px;
}
.link:after {
  position: absolute;
  content: '';
  bottom: 0;
  display: block;
  width: 0;
  height: 2px;
  background: #282c34;
  transition: .3s;
}
.link.right:after {
  right: 0;
}
.link.left:after {
  left: 0;
}
.link.center:after {
  left: 50%;
  transform: translate(-50%);
}
.link:hover:after {
  width: 100%;
}

/* ----- top -----  */
.link.top:after {
  left: 0;
  width: 100%;
  bottom: 5px;
  opacity: 0;
}

.link.top:hover:after {
  opacity: 1;
  bottom: 0
}

/* ----- bottom -----  */
.link.bottom:after {
  left: 0;
  width: 100%;
  bottom: -5px;
  opacity: 0;
}

.link.bottom:hover:after {
  opacity: 1;
  bottom: 0
}

/* ----- decoration -----  */
body {
  padding: 20px 0;
  background: #4A90E2;
  text-align: center;
}