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 under

Answer 1

Try following css,

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

Demo