CSS ile bir stilize html başlığı oluşturma

Question

Ana sayfam için bazı stilize üstbilgiler oluştururken etrafa takılıyorum. Bu tür bir başlık üzerine düştüm ve css ile bunun gibi bir şey yaratmanın mümkün olup olmadığını merak ediyorum. Önem varsa, Bootstrap stillerini kullanıyorum.

çok zayıf olabilir, ancak başlık çizgili bir "çubuğu" kabın geri kalan dolgu onu takip eden sahiptir. Onu aramayı denedim, ancak sadece başlıktan önce ve sonra bir çizgiyle ortalanmış başlıkları buldum. Sadece iki satırlı bir başlık türü (başlığın tepesinde ve başlığın alt kısmında biri) benim için de hile yapabilir.

başlığının .container içine yerleştirilir ve ben .container tüm uzunluğu için başlık uzunluğunu istiyorum:

<div class="container"> 
    <h3><span>Projects</span></h3> 
</div> 

JSFiddle: önceden https://jsfiddle.net/ozxk82j1/1/

Teşekkür!

Answer 1

İlk olarak HTML geçersiz. öğelerine sahip span öğeleri, blok düzeyindeki h3'u içeremez. Bunun dışında

bir sözde eleman yinelenen bir lineer gradyan ile burada gayet:

Eğer, kesinlikle sözde elemanının konumlandırılması çok uzun bir genişlik vermek ve h3 için ilgili overflow:hidden uygulanabilir ise de FlexBox kullanılarak Örnek herhangi ... erm, taşma.

h3 { 
 
    display: flex; 
 
} 
 
h3::after { 
 
    content: ''; 
 
    background: repeating-linear-gradient(135deg, 
 
    transparent, transparent 2px, 
 
    lightgrey 4px, lightgrey 6px); 
 
    flex: 1; 
 
    margin-left: .25em; 
 
}

<div class="container"> 
 
    <h3>Projects</h3> 
 
    <h3>Lorem ipsum dolor ipsum.</h3> 
 
</div>

sözde elemanının yüksekliği

paketine ayarlanabilir (dikey merkez align-items:center tutacak) ve 'satır' opaklık RGBA renkler kullanılarak ayarlanabilir.

Eğer Yeni Projeler gördün

h3 { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
h3::after { 
 
    content: ''; 
 
    
 
    background: repeating-linear-gradient(135deg, 
 
    transparent, transparent 2px, 
 
    rgba(0,0,0,0.1) 4px, rgba(0,0,0,0.1) 6px); 
 
    
 
    height:.5em; 
 
    flex: 1; 
 
    margin-left: .25em; 
 
}

<div class="container"> 
 
    <h3>Projects</h3> 
 
    <h3>Lorem ipsum dolor ipsum.</h3> 
 
</div>