Remove underline only from anchor element child

Question

When an a tag contains child elements, like an i tag, it's still applying the underline to it on hover, and I'm wondering how to remove the underline from just the i tag when someone hovers over the a tag.

The CSS I'm working with:

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

Here is a fiddle to explain: http://jsfiddle.net/kkz66x2q/

I simply would like the underline to be GONE only on the i element when you hover over the link.

Answer 1

Try following css,

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Demo

Answer 2

Set the display property of i to inline-block:

a i {
    ...
    display: inline-block;
}

JSFiddle

Answer 3

I had the same issue and fixed this using the following css rule:

a:-webkit-any-link {text-decoration:none}

hope it helps!