下划线 <a> 和 <span> 就像一个完整的链接

Posted 2023-03-06

【中文标题】下划线 <a> 和 <span> 就像一个完整的链接

【英文标题】：underline <a> and <span> like a whole link

【发布时间】：2018-07-13 00:45:16

【问题描述】：

我试图用一行强调<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：当文本大小大于字形时？图标有细线，文本有粗线！

【问题讨论】：

没错。因此不要更改为 v4

@mplungjan 他们删除了图标 :) getbootstrap.com/docs/4.0/extend/icons

v4-alpha.getbootstrap.com/migration/#components 在 FA 中使用 fas fa-chevron-right

【参考方案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：

请注意，文本装饰不会传播到浮动和 绝对定位的后代，也不是 atomic 的内容 内联级后代，例如 内联块 和内联表。

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>

更新

正如评论中所指出的，文本和图标之间的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>

【讨论】：

如果文本的 font-size 大于 glyphicon 的 font-size 怎么办？ t 在文本中显示粗线和带有字形的细线！你怎么能解决这个问题？