Когдаa тег содержит дочерние элементы, такие какi тег, он все еще применяет подчеркивание к нему при наведении, и мне интересно, как удалить подчеркивание только изi тег, когда кто-то парит надa тег.

CSS, с которым я работаю:

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

Вот скрипка, чтобы объяснить:http://jsfiddle.net/kkz66x2q/

Я просто хотел бы, чтобы подчеркивание Ушел только наi элемент, когда вы наводите курсор на ссылку.