html - 带跨度的下划线分隔符有填充或边距

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你可以阅读:

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped

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

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

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

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

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