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

I faced the same problem.

But I wanted the inner element to be Right, so setting just float: right worked fine.

a {
    display: block;
    overflow: hidden; // Clearfix
    text-decoration: none;
}
a .right-none-underline-element { float: right }

For your reference.