CSS 减少文本和边框之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14733011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS decrease space between text and border
提问by obs
When hovering a link I want it to get an underline. The underline should be 2px strong and 4px below the text.
悬停链接时，我希望它带有下划线。下划线应该在文本下方 2px 和 4px 处。
With
和
text-decoration: underline
I get a 1px strong line which is 4px below. (Distances vary by font)
我得到了一条 1px 的强线，它在下面 4px 处。（距离因字体而异）
If I write
如果我写
border-bottom: 2px solid #000;
I get a 2px line which is about 10px below the text.
我得到一个 2px 的线，它在文本下方大约 10px 处。
How can I decrease the distance between the text and the border?
如何减少文本和边框之间的距离？
padding-bottom: -6px
does not work. Any negative value with padding-bottom does not work.
不起作用。padding-bottom 的任何负值都不起作用。
Or how can i get the underline to be 2px strong?
或者我怎样才能让下划线变强 2px？
回答by nice ass
One quick solution that comes into my mind is to apply the border on a pseudo-element:
我想到的一个快速解决方案是在伪元素上应用边框：
.border{
position: relative;
}
.border:hover::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: 4px; /* <- distance */
border-bottom: 2px solid #000;
}
(example)
（示例）
回答by vatavale
You can use line-height for decrease distance.
您可以使用 line-height 来减少距离。
.underline {
display: inline-block;
line-height: 0.9; // the distance
border-bottom: 1px solid;
}
Drawback of this method -- because we use block display it works only for single line of the text.
这种方法的缺点——因为我们使用块显示它只适用于单行文本。
回答by Dmitry Kulahin
Multi line solution
多线解决方案
Explanation.I'm creating a sibling which has the same text and text style and is shifted to top a bit. If you want to keep your code clean you can insert the sibling using JS on a page load event.
解释。我正在创建一个具有相同文本和文本样式并移到顶部的兄弟姐妹。如果你想保持你的代码干净，你可以在页面加载事件上使用 JS 插入兄弟。
Restrictions.This solution doesn't work inside paragraph of text.
限制。此解决方案在文本段落内不起作用。
.underlined_link {
text-decoration: none;
display: inline;
}
.underlined_link h2,
.underlined_link div {
display: inline;
font-size: 20px;
margin: 0;
line-height: 35px;
font-weight: normal;
padding: 0;
}
.underlined_link h2 {
color: transparent;
border-bottom: 1px solid red;
}
.underlined_link div {
position: absolute;
top: 10px;
left: 8px;
}<a class="underlined_link" href="#">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</h2>
<div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</span></div>
</a>回答by Estev?o Lucas
You can use backgroundwith linear-gradientto produce a border, and with it you can position it anywhere.
您可以使用backgroundwithlinear-gradient来生成边框，并且可以使用它将其放置在任何位置。
For example:
例如：
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 94%;
background-repeat: no-repeat;
background-size: 0;
Credit: https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
信用：https: //www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
