Links em fade e tracejado

Yummy

Oii gente linda, gente maravilhosa!
Como vocês estão? Faz tempo que eu não posto tutorial, né?
Vim postar um tutorial que eu vi no Jackie Dream, que deixa seu link personalizado. 
Para terem ideia de como fica, cliquem aqui e passem o mouse no título do post da Jackie!
Fica bem bonito e é fácil de fazer! 
Vamos conferir como é o tuto!

*O*

1. Passo: Aperte Ctrl+F e procure por: 

 a:link {

2. Passo: 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);}

3. Passo: Substitua todo o código por esse: 

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 -----*/}

4. Passo: Edite o que está destacado:

Cor do link: Cor do link normal

Cor dos links visitados: Que cor que ele fica quando você clica

Cor dos links ao passar o mouse: Cor muda quando passa o mouse

Underline: Se quiser tirar o sublinhado e deixar só o tracejado troque os trechos underline por none

Dashed: Tracejado, se quiser outro tipo, troque. (Ex: dotted - pontilhado)

É isso, os créditos vão à Jackie!

Super fácil, né? 

O que acharam? Fizeram o tutorial? Comentem!

Beijos, Giulia.