jQuery 如何在css中的标题前后显示水平线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38212963/
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 to display a horizontal line before and after a heading in css
提问by Nadj
I am trying to style a an html heading in css but am not getting the correct result as my jsfiddle shows: https://jsfiddle.net/Nadjanara/nmo0245t/. The following are the html and css codes:
我正在尝试在 css 中设置 html 标题的样式，但没有得到正确的结果，如我的 jsfiddle 所示：https://jsfiddle.net/Nadjanara/nmo0245t/ 。以下是html和css代码：
<h2><span>Heading2</span></h2>
h2{
width:100%;
text-align:center;
border-bottom: 1px solid #000;
line-height:0.1em; margin:10px 0 20px;
}
h2 span{
padding:0 10px;
}
How can I put the horizontal line only before and after the heading and also control the width of the line so that such doesn't occupy the full width of the screen?
如何仅在标题前后放置水平线并控制线的宽度，使其不会占据屏幕的整个宽度？
回答by Jonathan
There's obviously many ways you can achieve what you're after. But how about something like this?
显然，您可以通过多种方式实现您所追求的目标。但如何像这样？
h1 {
font-size: 4rem;
}
h1::before,
h1::after {
display: inline-block;
content: "";
border-top: .3rem solid black;
width: 4rem;
margin: 0 1rem;
transform: translateY(-1rem);
}<h1>Heading</h1>回答by will
Give this a shot! A pseduo-element will be your best bet here. You can change the width of the line to whatever you need it, but for this example I used 500px.
试一试！伪元素将是您最好的选择。您可以将线条的宽度更改为您需要的任何宽度，但在本示例中，我使用了 500 像素。
h2{
text-align:center;
line-height:0.1em;
position:relative;
margin:10px 0 20px;
background:#FFF;
}
h2 span{
background:#FFF;
z-index:2;
position: relative;
}
h2:before{
content:'';
position:absolute;
display:block;
top:50%;
height:1px;
width: 500px;
background:#000;
left:50%;
z-index:1;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
