efeito tracejado + link em fade

Pra quem ainda não sabe o efeito tracejado é quando você passa o mouse em cima de um link e aparece alguns tracinhos em baixo. links em fade é quando você passa o mouse no link e ele muda de cor bem devagar.
então quer aprender esses dois efeitos juntos então vamos ao tutorial:

Vá no seu HTML e dê um ctrl + f e procure por:  a:link {
O código que o acompanha deve estar mais ou menos assim:

a:link {

  text-decoration:underline;

  color: $(link.color);

}

a:visited {

  text-decoration:none;

  color: $(link.visited.color);

}

a:hover {

  text-decoration:none;

  color: $(link.hover.color);

}

Substitua tudo por:

a:link {
color: #ff7fb2;     /* -------- COR DO LINK ----------*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out; 

} 

  a:visited {
color: #ff7fb2;   /*------ COR DOS LINKS VISITADOS -----*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1; 

} 

 a:hover {
color: #FF82AB;    /*----- COR DOS LINKS AO PASSAR O MOUSE -----*/
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
  text-decoration:underline;
  color: $(link.hover.color);
 border-bottom: 1px dashed #FF82AB;    /*----- COR DO TRACEJADO -----*/ 

}

 OBS1: As cores dos links podem ser alteradas no design do modelo
 OBS2: Se quiser tirar o sublinhado e deixar só o tracejado troque os trechos underline por none
 OBS3: A outros tipos de bordas além da dashed (tracejada) como a dotted (pontilhada) por exemplo.