[英]Padding on a:before pseudo element
I am trying to style some links with lines underneath using the :before pseudo element.我正在尝试使用 :before 伪元素为下面的线条设置一些链接的样式。 The link element has some padding that I cannot change.
链接元素有一些我无法更改的填充。 I have set the before position to absolute to show the line, but as I understand, this means the padding of the link gets counted as part of the :before element width.
我已将 before 位置设置为绝对以显示该行,但据我所知,这意味着链接的填充被计为 :before 元素宽度的一部分。 I have tried using
box-sizing: content-box;
我曾尝试使用
box-sizing: content-box;
but the padding space still gets included.但填充空间仍然包含在内。
What I trying to achieve is for the line to only go as far as the link text and not into the padding space.我试图实现的是让该行只到达链接文本而不是填充空间。
HTML: HTML:
<div>
<a href="">heya</a>
<a href="">what's up?</a>
</div>
CSS: 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;
}
Thanks谢谢
use the css calc
as : width: calc(100% - 2em);
使用 css
calc
为: width: calc(100% - 2em);
here is the fiddle : https://jsfiddle.net/hellooutlook/krgLeq6h/1/这是小提琴: https : //jsfiddle.net/hellooutlook/krgLeq6h/1/
Do it with background and you will have better control:使用背景进行操作,您将有更好的控制:
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>
You could use the left
and right
properties (matching the x -padding of your anchor) and drop the width
:您可以使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.