Bir süredir CSS derslerine ara vermiştik. Şimdi ise güzel bir ders ile karşınızdayız. CSS ile çizgi efektli yazı yazma nedir öncelikle bunu açıklayalım. Standart border kodumuzu, yazımızın arkasından geçecek şekilde tanımlamaya çalışacağız. Böylelikle ortaya gerçekten güzel bir görünüm çıkacak. Dilerseniz aşağıdaki adımlar doğrultusunda web sitenizdeki yazı başlıklarınızda v.b. kullanabilirsiniz bu özelliği. Fazla vakit kaybetmeden izniniz ile, ilgili adımlara göz atıyor olacağız.

AYRICA: CSS ile Uzun Yazıları Üç Nokta ile Bitirmek

1) Öncelikle temanızın CSS alanına aşağıdaki kodları ekleyin.

<style>
/* CSS */
.line-titles {position: relative;margin-top:30px;margin-left:-40px;text-align: center;display: block;font-size:16px;width:1050px;}
.line-titles:before {position:absolute;top:50%;z-index:1;display:block;width:100%;height:1px;border-top:1px solid #ddd;content:""}
.line-titles span {position:relative;z-index:1;padding:0 20px;background:#fff;display:inline-block}
</style>


2) HTML kısmına ise aşağıdaki kodları ekleyin.

<div class='line-titles'><span>Başlık Buraya Gelecek</span></div>


Örnek Görünüm

Not: Kırmızı alanı kendinize göre değiştirmeyi unutmayınız.