<div></div>

div {
  position: relative;
  color: #ff3296;
}
div:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 10px;
  background-color: #98004a;
  content: "";
  transition: width 0.2s;
  animation: underline 10s .5s;
}

@keyframes underline {
  from{width:0%} 
  to{width:100%}
}