html - 如何使用 CSS 将一些水平偏移量添加到元素底部边框？

Question

我在一些 a 元素上使用了 bottom-border，我想给边框添加一些水平偏移。

我现在拥有的:

Link very cool name
-------------------

我想要的:

Link very cool name
   ----------------

我该如何存档？仅使用 a 元素。

Answer 1

伪元素在这里是理想的选择，它可以按照您想要的任何方式设置样式，颜色、宽度和高度...甚至位于链接文本下方。

a {
  position: relative;
  text-decoration: none;
}
a::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 75%;
  height: 2px;
  background: orange;
}

<a href="#">Long stretch of text</a>