::after ve ::before Kullanımı
Css kullanarak istediğimiz html etiketlerinin önüne veya sonuna metin eklenmesini sağlayabiliriz. ::after ile belirttiğimiz etiketlerin sonuna, ::before ile de önüne istediğimiz metinlerin otomatik olarak eklenmesini sağlayabiliriz.
Content özelliği ile eklenecek metin belirtilir. Stil özelliklerini belirleyerek de bu metni biçimlendirebilriz.
etiketClassVeyaId::after {
content:"Eklenecek metin";
/* Diğer stil özellikleri */
}
Belirttiğimiz metin belirttiğimiz etiketin içine eklenecektir. Örneğin p::after şeklinde kullanarak tüm p etiketlerinden sonra "-Paragraf Sonu" eklenmesini belirtirsek, bu metin p etiketi içinde en sona eklenecek, ondan sonra p etiketi kapanmış olacaktır.
::before kullanırsak da metin p etiketi açılır açılmaz eklenecek, ardından etiketin içeriği gelecektir.
Örnek: Aşağıdaki örnekte tüm p etiketlerinin içindeki en son yere, belirtilen metin eklenir.
p::after{
content: "-Paragraf Sonu";
color:gray;
}
Aşağıdaki örnekte ise resim class'ı uygulanmış etiketlerin sonuna "Resmi büyütmek için tıklayınız" yazısı ekleniyor:
<style>
.resim::after{
content:"Resmi büyütmek için tıklayınız.";
/* Diğer stil özelliklerimizi de buraya yazabiliriz */
}
</style>
...............
<a href="#"><div class="resim">
<img src="resimler/ornekresim.jpg"/>
<br/>
</div></a>
Butonlarda, galerilerde vb yerlerde after ya da before kullanarak daha gelişmiş örnekler yapılabilir. Konu örnekleri kısmını inceleyiniz.
html elemanlarının önüne veya sonuna metin ekleme, ::after ne işe yarar, ::before ne işe yarar, ::after kullanımı örnekleri, ::before kullanımı örnekleri
KONU İLE İLGİLİ ÖRNEKLER
|
::after örneği: Butonun üzerine gelindiğinde metin eklenmesini sağlama
|
Kendin Dene
|
|
::after kullanarak kutulardan sonra gölge efekti ekleme
|
Kendin Dene
|
26333 kez okundu.