Quando uma tag contém elementos filhos, como umi , ele ainda está aplicando o sublinhado ao passar o mouse e estou pensando em como remover o sublinhado apenas doi quando alguém passa o mouse sobre oa etiqueta, rótulo, palavra-chave.

O CSS com o qual estou trabalhando:

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;
}

Aqui está um violino para explicar:http://jsfiddle.net/kkz66x2q/

Eu simplesmente gostaria que o sublinhado fosse GONE apenas noi elemento quando você passa o mouse sobre o link.