Question

I am trying to underline with one line the <a> and the <span>

I want it all to be a link with an underline. It leaves a small space between the word and the span, but it shouldn't.

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

Edit 1: And when the text size is higher than the glyphicon? the icon has a thin line and the text a heavy line!

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：

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

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>

<强>更新

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

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> and <span> like a whole link

1 个答案: