我正在使用Pseudo-element:before和:after在标题之前和之后绘制一条线.它正在使用图像:
@H_403_2@.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}
结果如下:
但是,我希望该行扩展并在标题之前和之后填写整个div,如下所示:
有没有办法为图像指定一个百分比来拉伸?我试试这个,但它不起作用:
@H_403_2@.mydiv img { width: 100%; height: auto; }解决方法
你不需要两个:之前和之后,2中的任何一个都足够了,而且你被告知,你不需要一个图像.请参阅下面的方法.
@H_403_2@#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;
}
@H_403_2@<div id="header">
<h3>Last Projects</h3>
</div>