Css Before ve After Sözde Öğelerin Kullanımı

Css2 ile gelen en faydalı özelliklerden biri de yeni sözde seçicilerden Before ve After'ın nasıl kullanıldığını ve kullanım alanlarının nereler olduğunu göreceğiz. Css ile pek haşir neşir olmayanların pek kullanmadığı ama ne olduğunu öğrendiğinizde tam aradığım şey diyeceğiniz bir özellik.

Türkçe karşılığı olarak sırası ile öncesi ve sonrası olarak tanımlanmaktadır. Yani seçmiş olduğumuz nesnenin öncesinde ve sonrasında şu işlemi yap diyeceğiz. Şimdi basit bir örnek ile nasıl çalıştığını anlatayım.

Diyelim ki bir paragraf yapımız var ve bu payının tırnak içinde olmasını istiyoruz. İşte o zaman Before ve After özelliğini kullanmamız gerekmektedir. Paragrafın başına ve sonuna tırnak koy diyeceğiz yani. Onun için kodlaması şu şekilde olacaktır;

<style type="text/css">
.paragraf:before{content: '"';}
.paragraf:after{content: '"';}
</style>
<p class="paragraf">deneme paragraf yazısı</p>

Yukarıdaki paragraf classına ait değerde hiçbir şekilde tırnak işareti konulmazken css ile Before ve After kullanarak content özelliği ile tırnak işaretlerinin konulmasını istedik. Böylesi bir kolay kullanımı var işte. Tabi hep content ile bir şeyler yazdırmıyoruz. İstediğimiz gibi css düzenlemesi yapabiliriz. Content ile kısıtlı kalmayın yani.

İlla iki değeri de aynı anda kullanacağız diye bir zorunlulukta yok mesela bu seferde yazıların en sonuna üç nokta koyarak bir düzenleme yapalım. Onun kodlaması da şu şekilde olacak;

<style type="text/css">
.paragraf:after{content: '...';}
</style>
<p class="paragraf">deneme paragraf yazısı</p>

Görmüş olduğunuz gibi bu kadar basit! Şimdi isterseniz yazı yerine biraz düzenlemeler yaparak daha farklı olarak nasıl kullanılır bunu görelim.

Link yapılarında çoğu sitede linkin sonunda bir simge olur. Bu simgeyi biz After cümleciği ile yapabiliriz. Bunun örneğini de şu şekilde verebilirim;

<style type="text/css">
a[target="_blank"]:after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-left:2px;
background: url(http://png.findicons.com/files/icons/1588/farm_fresh_web/16/link_break.png) no-repeat;
}</style>
<a href="http://ibrahimcevruk.com" target="_blank">ibrahim Çevrük</a>

Yukarıdaki gibi yaptığımızda linklerde targeti _blank olan değerlere uygulanacak olan bir işlem var. Bu işlem link değerinin sonuna bir resim dosyası koymaktır.

Örnekler üzerinden basit anlamda bu şekilde anlatabiliyorum anca :) Bir sonraki derslerde bu özelliği kullanarak nasıl farklı şekiller ve işlemler yapılabilir bunları göreceğiz.
- 23.08.2013 / 13:29:43 2

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

6:54 Php Dersleri

Php ile Dosya Silme İşlemi | Unlink

Kategori: Php Dersleri | 03.05.2013
5:46 Css Dersleri
22:01 cURL Dersleri

cURL ile Instagram Fotoğraflarını İndirme

Kategori: cURL Dersleri | 20.03.2015
9:02 Php Dersleri

Değişken Tanımlama ve Ekrana Yazdırma

Kategori: Php Dersleri | 02.05.2013
Genel Makaleler

En İyi PHP Editörleri Derlemesi

Kategori: Genel Makaleler | 01.02.2015

Yorum Listesi (1) # YorumYap

  • phpguzel (12.09.2013 - 12:21:22)
    Açık ve anlaşılır izahlarınız ve bilgi paylaşımınız için teşekkürler...

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.