如何在CSS中的<a>元素中僅下劃線<span>文本元素？

Question

我使用的引導，我有以下代碼：

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

我怎樣才能懸停擺脫下劃線的？

Answer 1

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

Answer 2

使用text-decoration上<span>的a:hover財產。

在下面的代碼片段看一看：

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>

希望這有助於！

Answer 3

限制的風格只爲類

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

而這對許多其他因素，通用

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