html - 在伪元素之前和之后使用以进行线条

我正在使用伪元素:before和:after在标题之前和之后绘制一条线。它正在处理图像:

.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}

结果如下:

但是，我想在标题之前和之后将行扩展并填充整个div，如下所示:

有没有一种方法可以为图像指定拉伸(stretch)百分比？我尝试了这个，但是没有用:

.mydiv img {
  width: 100%;
  height: auto;
}

最佳答案

您不需要: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>

关于html - 在伪元素之前和之后使用以进行线条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28434521/