CSS before ve after sözde elementleri

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
CSS2 ile gelen en faydalı özelliklerden biri de yeni sözde seçiciler, bunlardan ikisi "before" ve "after" seçicileri birçok minimal yaklaşıma olanak sağladı.

Özelliğin çıkış noktası bir elementin öncesi veya sonrasına noktalama gibi işaretçiler yerleşitrebilmekti. Yani en sade kullanımıyla:
.my_quote:before {
	content: '"';
}

.my_quote:after {
	content: '"';
}
Bu kod ile bir alıntı yazısının başına ve sonuna çift tırnak ekleyebiliyorsunuz:



Kırmızı ile işaretlediğim karakterler css ile eklendi. Ya da devamı olan bir yazı basarken ekrana:
.read_more_link:after {
	content: '...';
}
kodu ile "..." ekleyebiliyorsunuz:



Fakat bu yeni sözde seçicileri akıllıca kullanarak bir element üretebilirsiniz. Yani bu seçici "content" özniteliği aldığı zaman dom üstünde yerleşmese de görsel olarak bir element oluşturuyor. Doğal olarak bu elementi block level yapabilir, genişlik yükseklik tanımlayabilir, posizyonlamasını istediğiniz gibi ayarlayabilirsiniz.

Çok yaygınlaşan bir kullanımla, bir elementin başına veya sonuna eklemek istediğiniz ufak simgeleri, resimleri veya işaretçileri bu sözde seçicilerle yaratabilirsiniz.

Basit örnekle size linklerinize simgeler koyabilmeyi anlatacağım. Biliyorsunuz HTML öznitelik seçicileri var css'de ve "target" özniteliği "_blank" olan bir linki diğerlerinden ayrı bir şekilde seçebilirsiniz. a[target="_blank"] seçicisi dış bağlantıları seçecektir.
a[target="_blank"]:after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(/images/external_link_icon.png) no-repeat left top;
}
Bu kod dış baglantıyı gösteren bir a elementinin sonuna inline-block türünde bir element ekleyecek ve içeriğini boş bir şekilde ayarlayacaktır. Genişlik ve yüksekliğini 16px olarak ayarlayıp art alanını da bir simgeyi olarak ayarladığımızda linkin sonunda bu simgeyi görebileceğiz:



Bu sözde elementlerini şu tarayıcılar destekliyor:
  • Chrome 2+
  • Firefox 3.5+
  • Safari 1.3+
  • Opera 9.2+
  • IE8+ (Ufak problemlerle beraber)

Bu sözde elementlerle yarattığınız içeriğin sadece görsel amaçlarla kullanılmasi gerektiğini unutmayın, birçok erişilebilirlik okuyucusu veya tarayıcısı bu elementleri okuyamadığı için fonksiyonalitenizi bozacak içerikleri bu elementlerle kullanmamaya dikkat edin.

Bu yazıda çok yaratıcı örneklerini görmediniz fakat ne işe yaradıklarını bilmeniz ileride deney yapmanızı kolaylaştıracaktır veya karşılaştığınızda daha kolay anlamanızı sağlayacaktır.

Yorumlar

Üye Resmi Bir dost
2 Ocak Çarşamba ´13 04:29
En azindan css'de bu kadar detayli selector oldugunu gordum. Eyvallah.

(Bu arada captcha retina ios'a [640x960] sigmiyor site de saga dogru kaydirilamadigindan sikinti oluyor)
Üye Resmi Shirt
27 Ekim Pazartesi ´14 05:44
Merhaba ::before ile :before arasında bir fark varmı aynı anlamımı taşıyor acab ? Ayrıca before yerine zaten -yada ... olarak koyabiliriz normal html dökümanın içine before kullanımı bize ne gibi avantaj sağlıyor ?
Teşekkürler.
Üye Resmi Şafak Saraçoğlu
12 Ekim Pazartesi ´15 17:57
Teşekkür ederim çok faydalı bir konu olmuş
Üye Resmi Zalo
8 Aralık Salı ´15 04:41
Çok teşekkür ederim işime yaradı
Üye Resmi mustafa z
25 Mayıs Çarşamba ´16 08:28
peki css içinde bu kodlarla content in içine link ekliye bilir miyim ? örnek : content:"<a href="http://link">link</a>"
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor