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

2024年1月29日 158次阅读

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

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

span {
  padding-right: 10px;
}
<a href="#">
  <span>&lt;</span>
  <span>Previous page</span>
</a>

最佳答案 在您的情况下,填充将在两个文本之间添加10px空间,因此我们可以使用字母间距与第一个跨度来创建此空间.

如果您参考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>

为了使这更通用,我们可以考虑使用伪元素的字母间距来模拟跨度之间的空间：

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

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