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

Answer 2

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

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

hope it helps!

Answer 3

Set the display property of i to inline-block:

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

JSFiddle

Answer 4

Simply add display:inline-block;

FIDDLE DEMO

a:hover i {
    display:inline-block;
    text-decoration:none !important;
}

Answer 5

You can also write you HTML like

    <a href="#">Link</a><i>(2)</i>

and CSS like

  a{
    display:inline-block;
    text-decoration:none;
  }

Answer 6

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.