Question

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

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

span {
  padding-right: 10px;
}

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

Answer 1

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

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

下划线，上划线和直通仅适用于文字（包括空格，字母间距和字间距）：margin，边框和填充被跳过

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>

Answer 2

删除填充并插入空格是一种选择。

＆＃13;

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

＆＃13;

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

2 个答案: