Sử dụng trước & sau phần tử giả để tạo dòng

Question

Tôi đang sử dụng phần tử Pseudo :before và :after để vẽ một đường trước và sau tiêu đề. Đó là làm việc với một hình ảnh:

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

Dưới đây là kết quả:

Nhưng, tôi muốn các dòng để mở rộng và điền vào toàn bộ div trước và sau khi tiêu đề, như thế này :

có cách nào để xác định một tỷ lệ phần trăm cho hình ảnh cho nó căng? Tôi cố gắng này, nhưng nó không làm việc:

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

Answer 1

Bạn không cần cả :before và :after, một trong 2 sẽ là đủ và như bạn đã nói, bạn không cần một hình ảnh. Xem cách tiếp cận bên dưới.

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