Link Animado com Css

Vamos fazer um link animado com Css utilizaremos aqui o pseudo-elemento ::after 

que é o último filho do elemento selecionado.

Vamos começar com Html:

<div class="link-animado">
                  
   <a href="www.loopnerd.com.br" target="_blank" class="link" title="Saiba mais"> Saiba mais</a>
                  
</div>

Vamos adicionar o Css:

.link-animado { 

	width:100%; 
	height:auto; 
	float:left;
	margin-bottom:5px;   
}

.link { 

	position:relative; 
	color:#00bec5; 
	text-decoration:none; 
	font-family:"open_sansregular";  
	font-size:1.5em; 
	font-weight:100;
}

.link:after {

  display: block;
  position: absolute;
  left: 0;
  bottom:-5px;
  width: 0;
  height: 1px;
  background-color: #00bec5;
  content: "";
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.link a {text-decoration:none; color:#00bec5;} 
.link:hover { color: #00bec5;}
.link:hover:after { width: 100%;}

Baixar Código Veja Funcionando