Cómo personalizar enlaces

Hey babies! Hoy traigo un tutorial de cómo personalizar los enlaces de nuestro blog a petición de Tsuki (gracias por la idea ～￣▽￣～). 

Como habéis podido ver, en todos los enlaces de mi diseño, debajo aparece una raya ondulada ya que no quería que fuera la típica raya o simplemente nada, así que busqué y encontré cómo hacerlo bonito y hoy os traigo cómo personalizarlo que es lo más simple del mundo. let's go!

Entramos en el HTML de nuestro blog en Tema > Personalizar > Editar HTML y antes de ]]></b:skin> colocamos el siguiente código:

a:link {
color:#COLOR;
text-decoration:none;
}

a:visited {
color:#COLOR;
text-decoration:none;
}

a:hover {
color:#COLOR;
text-decoration:none;
font-weight:none;
font-style:none;
}

Todo lo que está en negrita se puede cambiar, pero lo que nos interesa es el text-decoration. Cambiamos el none en hover, porque si lo hacemos en el primero, la "decoración" estará siempre activada, por así decirlo y aunque también queda bonito, yo lo tengo sólo en hover.

Tipos de decoración

Ahora sólo tenemos que cambiar ese none por uno de los siguientes tipos de decoración. 

• underline solid ➡ crea una línea sólida 
  
  
• underline double ➡ crea una doble línea 
  
  
• underline dotted ➡ crea una línea de puntitos 
  
  
• underline dashed ➡ crea una línea discontinua 
  
  
• underline wavy ➡ crea una línea ondulada 

Y listo, así de simple es decorar algo tan normalmente feo como son los enlaces, por algo mucho más bonito y estético. Espero que me haya explicado bien, que siento que he perdido práctica en hacer tutoriales 😅, pero de todos modos, si tenéis cualquier duda, no dudéis en comentarlo ^-^.