带跨度的下划线中断有填充或边距

Question

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

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

span {
  padding-right: 10px;
}

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

Answer 1

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

如果您参考规范，您可以阅读：

下划线、上划线和穿线仅应用于文本（包括空格、字母间距和字间距）：跳过边距、边框和填充

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>