Html 使用前后伪元素制作一条线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28434521/
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
Use before & after Pseudo-element to make a line
提问by Guillaume
I'm using Pseudo-element :beforeand :afterto draw a line before and after a title. It's working with an image:
我使用伪元素:before和:after前一个标题后画一条线。它正在处理图像：
.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}
Here is the result :
结果如下：
But, I would like the line to expand and fill in the whole div before and after the title, like this :
但是，我希望该行扩展并填充标题前后的整个 div，如下所示：
Is there a way to specify a percentage for the image for it to stretch? I try this, but it's not working :
有没有办法指定图像拉伸的百分比？我试试这个，但它不起作用：
.mydiv img {
width: 100%;
height: auto;
}
回答by Sleek Geek
You don't need both :beforeand :after, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.
您不需要两者:before和:after，两个中的任何一个就足够了，正如您被告知的那样，您不需要图像。请参阅下面的方法。
#header {
width: 100%;
height: 50px;
margin: 50px 0;
text-align: center;
font-size: 28px;
position: relative;
background-color: #57585C;
}
#header:after {
content: '';
width: 100%;
border-bottom: solid 1px #fff;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
h3 {
background-color: #57585C; /* Same as the parents Background */
width: auto;
display: inline-block;
z-index: 3;
padding: 0 20px 0 20px;
color: white;
position: relative;
font-family: calibri;
font-weight: lighter;
margin: 0;
}<div id="header">
<h3>Last Projects</h3>
</div>