Zamanında, iki çizgi arasına yazı yazmak ile ilgili içerik yazmış olabilirim, hatırlıyorum... Ancak bu sefer paylaşıyor olacağım teknik, daha farklı. Hem daha sağlıklı - hem de %100 responsive bir teknik. Eğer ki, sitenizdeki bazı alanlara iki çizgi arasına yazı yazmak veya başlıklarınızı bu şekilde eklemek istiyorsanız, aşağıdaki kodları kullanmanız bu yönde yeterli olacaktır. Hemen kodlara göz atıyoruz.

AYRICA: CSS Flexbox "ellipsis" Çalışmıyor Sorunu ve Çözümü

İki Çizgi Arasına Yazı Yazmak (Responsive)

1) CSS kodlarımız aşağıdaki gibidir.

.cizgilibaslik {
display: flex;
flex-direction: row;
}
.cizgilibaslik:before, .cizgilibaslik:after{
content: "";
flex: 1 1;
border-bottom: 1px solid #000;
margin: auto;
}
.cizgilibaslik:before {
margin-right: 10px;
}
.cizgilibaslik:after {
margin-left: 10px;
}


2) HTML kodumuz ise aşağıdaki gibi olacaktır.

<div class="cizgilibaslik">Örnek Başlık</div>

Not: Yukarıdaki kırmızı alanı, kendi başlığınıza göre değiştirmeyi unutmayın.