Html 如何制作文本装饰：用 2px 填充下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8037777/
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
How make text-decoration: underline with 2px padding?
提问by NiLL
I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?
我喜欢听话的朋友开发人员必须使用 2px 填充而不是默认情况下 1px 创建下划线。是否存在简单的解决方案？
PS Yeahh guys, I know about div with black backgrond color and 1px * Npx and position: relative, but It's so slowly...
PS 是的伙计们，我知道带有黑色背景颜色和 1px * Npx 和 position:relative 的 div，但它是如此缓慢......
回答by Jason Gennaro
You could wrap the text in a spanand give it a border-bottomwith padding-bottom:2px;.
您可以将文本包裹在 a 中span并给它一个border-bottomwith padding-bottom:2px;。
Like so
像这样
span{
display:inline-block;
border-bottom:1px solid black;
padding-bottom:2px;
}
Example: http://jsfiddle.net/uSMGU/
回答by jake
A great way to do this without adding and extra spans and having more control is using the :afterselector.
在不添加额外跨度并拥有更多控制权的情况下执行此操作的一种好方法是使用:after选择器。
Useful especially for navigation menus:
特别适用于导航菜单：
.active a:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want more or less space between the text and the underline, add a margin-top.
如果您希望文本和下划线之间有更多或更少的空间，请添加margin-top.
If you want a thicker underline, add more height:
如果您想要更粗的下划线，请添加更多height：
.active a:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}
回答by Alex
how about using border-bottom:1px; padding:what-you-likepx
怎么样使用 border-bottom:1px; padding:what-you-likepx
回答by Daniel Hidalgo
回答by agm1984
I used @jake's solution, but it gave me trouble with the horizontal alignment.
我使用了@jake 的解决方案，但它给我的水平对齐带来了麻烦。
My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.
我的导航链接是 flex 行，居中对齐，他的解决方案导致元素向上移动以保持水平居中。
I fixed it by doing this:
我通过这样做修复了它：
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
display: block;
}
This will maintain the horizontal alignment for you.
这将为您保持水平对齐。
