在 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>