Cuando una la etiqueta contiene elementos secundarios, como uni etiqueta, todavía está aplicando el subrayado al pasar el mouse sobre él y me pregunto cómo eliminar el subrayado solo dei etiqueta cuando alguien se cierne sobre ela etiqueta.

El CSS con el que estoy trabajando:

a{
    display:block;
    text-decoration:none;
}
a i{
  color:#888;
  margin-left:5px;
}
a:hover{
    text-decoration:underline;
}
a:hover i{
    text-decoration:none !important;
}

Aquí hay un violín para explicar:http://jsfiddle.net/kkz66x2q/

Simplemente me gustaría que el subrayado se FUERA solo en eli elemento cuando pasa el mouse sobre el enlace.