如何使用CSS为元素底部边框添加一些水平偏移？

Question

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

我现在拥有的：

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>

Answer 2

你可以试试这个：

a{
  text-decoration: none;
  display:inline-block;
}

a:after{
  content: "";
  border-bottom: dotted 2px red;
  width: 70%;
  float: right;
  padding-top: 5px;
}

https://jsfiddle.net/9xc0x58c/1/

Answer 3

你可以使用一个伪元素，即：在此元素之后和abs pos it，1px高背景颜色和你选择的链接长度的宽度等。 那会是必要的结果吗？不确定您为什么要这样做的要求，但它应该达到要求的结果。

Answer 4

你可以使用span

HTML

<a href="">Link <span class="un">very cool name</span></a>

CSS

.un{
border-bottom: dotted 2px red;
   }