在僞元素之前和之後使用來製作一條線

Question

我使用僞元素:before和:after在標題之前和之後繪製一條線。它的工作有一個形象：

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

下面是結果：

但是，我想行擴大和前後的標題在整個DIV填補，這樣：

是否有指定爲它拉伸圖像比例的方法嗎？我嘗試這一點，但它不工作：

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

Answer 1

你並不需要同時:before和:after，無論是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; 
 
}

<div id="header"> 
 
    <h3>Last Projects</h3> 
 
</div>