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.

possible duplicate of [How do I get this CSS text-decoration override to work?](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) also this one : http://stackoverflow.com/questions/3869286/any-way-to-stop-css-hover-text-decoration-underline-on-child — web-tiki, Sep 10 '14 at 09:58
@web-tiki your example shows a nested group, my example shows a hover object. Please explain how they are similar. Thank you. — Control Freak, Sep 10 '14 at 10:03
The `` tag is nested in the `` element therfore it is the same issue as in both links I provided. The fact that the underlining is set on over doesn't change the issue. + the solution provided in the answer below is already provided in the first link. — web-tiki, Sep 10 '14 at 10:07
@web-tiki Explain how the answer from that question is the same as the answers given to this question — Control Freak, Sep 10 '14 at 10:08
quote from the first link : "You can override text-decoration applied to a parent element with display:inline-block." — web-tiki, Sep 10 '14 at 10:09
Does this answer your question? [Cannot undo text-decoration for child-elements](https://stackoverflow.com/questions/5434819/cannot-undo-text-decoration-for-child-elements) — Jason C, Jun 21 '22 at 01:43

score 47 · Accepted Answer · answered Sep 10 '14 at 10:02

47

Try following css,

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

Demo

answered Sep 10 '14 at 10:02

Chamika Sandamal

23,565
5
63
86

2

I'm also curious as to why this works. Could anyone explain this? – michaellee Oct 01 '15 at 02:17
Normally this would mean that you can only apply `text-decoration` to block level elements, but that isn't what's happening... so this doesn't make a lot of sense. – doublejosh Sep 27 '17 at 02:20
5

to explain this, it's specifically part of the CSS spec that inline blocks within a link don't get an underline. you actually don't even need the `text-decoration:none !important;` line – stealthwang Jan 03 '18 at 20:59
@Chamika : I tried it in some html newsletters, and it's not working for some Outlook clients (Outlook 2013, 2010 for example). Any idea ? – Ron16 Oct 07 '19 at 14:24
1

What if the child element needs to be block level though? – Jason C Jun 21 '22 at 01:41

score 4 · Answer 2 · answered Sep 10 '14 at 10:02

4

Set the display property of i to inline-block:

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

JSFiddle

answered Sep 10 '14 at 10:02

Karlen Kishmiryan

7,322
5
35
45

score 1 · Answer 3 · answered Aug 18 '16 at 09:29

1

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

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

hope it helps!

answered Aug 18 '16 at 09:29

Lorenzo Meriggi

157
2
5

score 0 · Answer 4 · answered Sep 10 '14 at 10:01

0

Simply add display:inline-block;

FIDDLE DEMO

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

answered Sep 10 '14 at 10:01

Richa

3,261
2
27
51

score 0 · Answer 5 · answered Sep 10 '14 at 10:09

0

You can also write you HTML like

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

and CSS like

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

answered Sep 10 '14 at 10:09

Bir

794
1
15
31

score 0 · Answer 6 · answered Dec 21 '17 at 16:21

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

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)
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…

score 0 · Answer 7 · answered Aug 26 '19 at 02:52

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.

Remove underline only from anchor element child

7 Answers7

I got two things to add here…

Linked

Related