在a：伪元素之前填充

Question

我正在尝试使用：before伪元素在下面的线设置一些链接的样式。 link元素有一些我无法更改的填充。我已经将before位置设置为absolute以显示该行，但是据我所知，这意味着链接的填充被计为：before元素宽度的一部分。我曾尝试使用box-sizing: content-box;，但仍包含填充空间。

我试图实现的目的是使该行仅到达链接文本，而不进入填充空间。

HTML：

<div>
  <a href="">heya</a>
  <a href="">what's up?</a>
</div>

CSS：

a{
  text-decoration: none;
  color: black;
  position: relative;
  padding: 1em;
}
a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  background-color: #000;
}

jsfiddle

谢谢

Answer 1

使用CSScalc如：width: calc(100% - 2em);

这里是小提琴：https://jsfiddle.net/hellooutlook/krgLeq6h/1/

Answer 2

您可以使用left和right属性（与锚点的[[x-padding相匹配]，然后放下width：]]

a {
    text-decoration: none;
    color: black;
    position: relative;
    padding: 1em;
}

a::before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: 0;
    background-color: #000;
    left: 1rem;
    right: 1rem;
}

<div>
    <a href="">heya</a>
    <a href="">what's up?</a>
</div>

Answer 3

使用背景进行操作，您将可以更好地控制：