Más variantes del efecto :hover

En dabblet.com hay ejemplos con muchas de las posibles opciones que tiene el efecto hover sobre los enlaces de texto; la mayoría de ellas son comunes

Entre ellas, hay dos que me parecieron interesantes. La primera sólo es apta para espíritus alocados, se trata de agregar un color de fondo multicolor:

<style>
a.colorido:hover { 
  color: #FFF;
  padding=0 5px;
  background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
  background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79); 
  background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>

<a class="colorido" href="#">el enlace</a>

este es un un enlace muy colorido

La segunda, utliza los llamados selectores condicionales para mostrar la dirección URL del enlace cuando nos ponemos sobre él:

<style>
a.selector:hover:after {
  content: " [" attr(href) "] ";
  color: LightBlue;
  font-size: 11px;
}
</style>

<a class="selector" href="http://vagabundia.blogspot.com/">el enlace</a>

este otro muestra la URL de referencia

Y sobre esta última, podemos general variaciones; por ejemplo, en lugar de mostrar el contenido del atributo href, podríamos mostrar cualquier otro (title, rel, etc) y con CSS, transformar eso en alguna clase tooltip rápida:

<style>
  a.informacion {position: relative;}
  a.informacion:hover:after {
    background-color: CornflowerBlue;
    border-radius: 5px;
    color: #FFF;
    content: attr(rel);
    font-size: 12px;
    left: 2em;
    padding: 2px 10px;
    position: absolute;
    top: -1.5em;
    white-space: pre;
  }
</style>

<a class="informacion" href="#" rel="información detallada">el enlace</a>

y este enlace muestra cualquier otro texto adicional