下划线 <a> 和 <span> 就像一个整体 link

Question

我试图用一行强调 <a> 和 <span>

我希望所有内容都是带下划线的 link。它在单词和跨度之间留下一个小 space，但它不应该。

<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：当文本大小大于字形时？图标是细线，文字是粗线！

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，如果您参考 specification:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

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>

并解释一下您最初在两个图标之间看到的细线：

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped

因此，如果您删除任何白色 space，您将仅在文本下方看到该行：

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

更新

正如评论中指出的，文本和图标之间的不同 font-size 会使下划线不同，因此我们可以在这种情况下依赖边框：

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>

下划线 <a> 和 <span> 就像一个整体 link

underline <a> and <span> like a whole link

html

css

twitter-bootstrap

glyphicons

twitter-bootstrap-3