CSS CSS下划线小于标题宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23502675/
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 underline less than width of headline?
提问by therealbiglou
Is it possible with CSS to make the underline of a headline less wide than the headline text? I have the following style for an H1 headline:
是否可以使用 CSS 使标题的下划线宽度小于标题文本？对于 H1 标题，我有以下样式：
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
border-bottom: 1px #d2202f solid;
}
This produces a thin red underline below my H1 headlines. However, is it possible to make it so that the underline is 50% of the text in the headline?
这会在我的 H1 标题下方产生一条细红色下划线。但是，是否可以使下划线占标题文本的 50%？
回答by James Montagne
You can use a pseudo element with :before(or :after):
您可以将伪元素与:before(或:after) 一起使用：
h1 {
font-weight: 300;
display: inline-block;
padding-bottom: 5px;
position: relative;
}
h1:before{
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid red;
}
回答by Diodeus - James MacFarlane
Yes and no.
是和否。
Normal borders cannot do this, but you can fake it with a CSS3 gradient border.
普通边框无法做到这一点，但您可以使用 CSS3 渐变边框来伪造它。
请参阅：CSS3 渐变边框
