Satır

Question

için Pseudo öğesinden önce ve sonra kullanın Bir başlıktan önce ve sonra bir çizgi çizmek için Sözdizimi öğesi :before ve :after kullanıyorum. Bir görüntü ile çalışıyor: Böyle genişletmek ve başlığın öncesi ve sonrası bütün div doldurmak için çizgiyi istiyorum,

Ama: Burada

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

sonucudur :

o germek için resim için bir yüzdesini belirlemek için bir yolu var mı? Bunu deneyin, ama işe yaramıyor:

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

Answer 1

Hem :before ve :after, 2 ya yeterli olacak ve söylendi olarak, bir resim gerekmez gerekmez. Aşağıdaki yaklaşıma bakın.

#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>