Control Freak Control Freak - 3 months ago 14
CSS Question

Remove underline only from anchor element child

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

Try following css,

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

Demo

Comments