在 a:before 伪元素上填充

Question

我正在尝试使用 :before 伪元素为下面的线条设置一些链接的样式。 链接元素有一些我无法更改的填充。 我已将 before 位置设置为绝对以显示该行，但据我所知，这意味着链接的填充被计为 :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;
}

提琴手

谢谢

Answer 1

使用 css calc为： width: calc(100% - 2em);

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

Answer 2

使用背景进行操作，您将有更好的控制：

 a { text-decoration: none; color: black; padding: 1em; background: linear-gradient(#000,#000) bottom -0.5em center /* position */ /100% 2px /*width height */ no-repeat; background-origin:content-box; /* this will consider only the content and not the padding */ }

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

Answer 3

您可以使用left和right属性（匹配锚点的x填充）并降低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>