相关疑难解决方法(0)

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

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

span {
  padding-right: 10px;
}

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

我有一个 SVG 元素作为图标出现在链接之后：

<a class="external-link" href="http://www.google.com">google.com
    <svg class="external-link-svg">...</svg>
</a>

我希望下划线延伸到 svg 元素下方。从图像中可以看出，我已经完成了这项工作，但我设法做到这一点的唯一方法是在 CSS 中插入空格：

.external-link:after {
    content: "\00a0\00a0\00a0\00a0";
}

这感觉有点像黑客，因为如果我改变图标，比如说更宽或更窄的图标，下划线将不再是正确的长度。

有没有办法在不注入空格的情况下延长下划线？

非常感谢