Geçmiş zamanlarda çizgi efektli yazı yazma konusunda bir içerik kaleme almıştım. Ancak şu sıralar Responsive kavramına takılmış durumdayım. Hazırladığım veya editlediğim her şeyin Responsive olmasına, büyük - küçük ekranlarda sorunsuz çalışmasına özen gösteriyorum. Bu yüzden sizlerle bir içinden çizgi geçen başlık yapımı daha paylaşıyor olacağım. Bu paylaşımdaki kodlar, temanızdaki Responsive uyumluluğuna göre bağlı olarak da %100 Responsive olarak çalışmaktadır.

AYRICA: Input’lardaki Mavi Çerçeve Kaldırma Nasıl Yapılır?

İçinden Çizgi Geçen Başlık Yapımı (Alternatif Versiyon)

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

.sidebar h2{
margin-right:0!important;
padding-left:0!important;
position:relative;
text-align:left;
overflow:hidden;
margin-left:0!important;
}
.sidebar h2:after{
content: "";
display: block;
border-top: 2px solid #374760;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 0;
}
.sidebar h2 span {
padding-right:10px!important;
background: #fff!important;
display: inline-block;
position: relative!important;
z-index: 1!important;
}


2) HTML kodlarımız ise aşağıdaki gibidir.

<h2 class='title'><span>Tavsiye</span></h2>

Örnek Görünüm