强调<a>和<span>就像整个链接一样

Question

我试图用一行<a>和下划线加下划线<span>

我希望这一切都是带下划线的链接.它在单词和跨度之间留下了一个小空间,但它不应该.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<a  href="#" role="button">
    Saber mais   
    <span class="glyphicon glyphicon-menu-right size"></span>  
    <span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
    </a>

编辑1:当文本大小高于glyphicon时？图标有一条细线,文字很粗!

Answer 1

您可以在悬停时添加它,但是您需要注意,因为top:1px默认设置为图标,因此您需要将其删除以具有完整的连续线:

a.good .glyphicon {
  top: 0;
}

a:hover .glyphicon {
  text-decoration: underline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button" class="good">
Good one   
<span class="glyphicon glyphicon-menu-right size"></span>  
<span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
</a>
<br>
<a href="#" role="button">
Bad one   
<span class="glyphicon glyphicon-menu-right size"></span>  
<span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
</a>

另一种解决方案是将它们inline设为默认值inline-block,如果您参考规范:

请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.

a .glyphicon {
  top: 0;
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button">
Saber mais   
<span class="glyphicon glyphicon-menu-right size"></span>  
<span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
</a>

并解释最初在两个图标之间看到的小线:

下划线,上划线和直通仅应用于文本(包括空格,字母间距和字间距):跳过边距,边框和填充

因此,如果删除任何空白区域,您将只看到文本下方的行:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button">
Good one<span class="glyphicon glyphicon-menu-right size"></span><span class="glyphicon glyphicon-menu-right size segundoGlyph "></span></a>

UPDATE

正如评论中所指出的,文本和图标之间的不同字体大小会使下划线不同,因此在这种情况下我们可能依赖于边框:

a:hover {
 text-decoration:none!important;
 border-bottom:1px solid
}
.glyphicon {
  font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button">
Good one<span class="glyphicon glyphicon-menu-right size"></span><span class="glyphicon glyphicon-menu-right size segundoGlyph "></span></a>