How to only underline <span> text element inside an <a> element in CSS?

Question

I'm using Bootstrap and I have the following code:

<a class="b_author" href="#">
  <img class="b_author-avatar img-circle" src="/images/profile_photo.jpg" width="20" height="20">
  <span class="b_author-username">johndoe</span>
</a>

How can I get rid of the underline on hover ?

Answer 1

a:hover { text-decoration: none; }
a:hover span { text-decoration: underline; }

Answer 2

Use text-decoration property of a:hover on <span> .

Have a look at the snippet below:

 a { text-decoration: none; } a span { text-decoration: underline; } 

 <a class="boost_author" href="#"> <img class="boost_author-avatar img-circle" src="/images/profile_photo.jpg" width="20" height="20"> <span class="boost_author-username">johndoe</span> </a> 

Hope this helps!

Answer 3

Restricting the styles only for the classes

a.b_author{
  text-decoration: none;
}
a.b_author:hover span.b_author-username{
  text-decoration: underline;
}

And this for many others elements, general purpose

a{
  text-decoration: none;
}
a:hover span{
  text-decoration: underline;
}