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 got two things to add here…

using code sometimes as a child of an (regular inline) anchor, sometimes not:

  code
    font-family: Courier New, Courier, monospace
    color: green
    background: rgba( white, .2 )
    padding: 2px 4px
    text-decoration: none

  a code
    display: inline-block
    line-height: normal
    text-decoration: underline

1. You should add line-height: normal to kind of compensate for the inline-block, otherwise you will different paddings on linked elements than on others. (i.e. your line-height will easily start looking inconsistent)

2. And optionally: If you were just annoyed, that the underline has a different color (i.e. the outer link color, rather than the green of code) settings text-decoration once again on that inner element helps…

Answer 2

Try following css,

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

Demo

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!

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

Set the display property of i to inline-block:

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

JSFiddle