带跨度的下划线有填充或边距答案

【问题标题】：Underline breaks with spans have padding or margin带跨度的下划线有填充或边距
【发布时间】：2018-07-11 00:20:03
【问题描述】：

当内部有<span> 标签并设置了左/右填充或边距时，如何保持<a> 标签下划线从左到右不间断地运行？了解为什么会发生这种情况也会有所帮助？

我可能可以使用框阴影或边框底部来代替，但我不是在寻找那些解决方案。

span {
  padding-right: 10px;
}

<a href="#">
  <span>&lt;</span>
  <span>Previous page</span>
</a>

【问题讨论】：

但是下划线是用于文本的，而填充不是文本，另外，在您的代码 sn-p 中看不到下划线样式或标记？也许是盲目的，我想默认样式
有趣的问题.. 我也很想知道
@Andrew 这是标签的默认文本装饰

标签： html css

【解决方案1】：

在您的情况下，padding 将在两个文本之间添加 10px 的空间，因此我们可以使用 letter-spacing 和第一个 span 来创建这个空间。

如果您参考specification，您可以阅读：

下划线、上划线和换行仅适用于文本（包括空白、字母间距和字间距）：边距，边框和填充被跳过

span:first-child {
  letter-spacing: 10px;
}

<a href="#">
  <span>&lt;</span>
  <span>Previous page</span>
</a>

为了使这个更通用，我们可以考虑使用伪元素letter-spacing 来模拟span 之间的空间：

顺便说一下，不要忘记考虑在某些情况下已经存在的空白 [如上所述]。

.first span:after {
  content:" ";
  letter-spacing: 15px;
}

.second span:after {
  content:" ";
  letter-spacing: 30px;
}

span:last-child::after {
  display:none;  /* no need for last child*/
}

<a href="#">
  <span>aa</span>
  <span>bb</span>
  <span>cc</span>
</a>
<br>
<a href="#"><span>aa</span><span>bb</span><span>cc</span></a>
<br>
<a href="#" class="first">
  <span>aa</span>
  <span>bb</span>
  <span>cc</span>
</a>
<br>
<a href="#" class="first"><span>aa</span><span>bb</span><span>cc</span></a>
<br>
<a href="#" class="second">
  <span>aa</span>
  <span>bb</span>
  <span>cc</span>
</a>

【讨论】：

这是一个聪明的方法，而且很有效。我希望我也能找出原始问题的原因。
@Stickers 因为字母间距增加了字母的宽度，因此每个字母将有更多的空间；）和文本下划线考虑整个字母的空间......我还添加了一个更通用的解决方案
@Stickers 这里是另一个问题以获取更多信息stackoverflow.com/questions/4015263/…

【解决方案2】：

可以选择删除填充并插入空格。

<a href="#">
  <span>&lt; </span>
  <span>Previous page</span>
</a>

【讨论】：

你的填充物在哪里？