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

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…