<a href="#" class="cp_link">リンクテキスト-link text-</a>

.cp_link {
  position: relative;
  padding: 5px;
  color: #2196f4;
  z-index: 0;
  transition: .5s ease-in-out .1s;/*テキストは0.1遅れて色が変わる*/
}
/*hover後の表示*/
.cp_link::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 00%;
  background: #2196f4;
  z-index: -1;
  transition: .5s;
}
.cp_link:hover {
  color: #fff;/*hover時の色*/
}
.cp_link:hover::after {
  height: 100%;/*hover時*/
}