CSS - ::after ve ::before Kullanımı


Twitter'da Paylaş Favorilerime Ekle

::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
Bu örnekte kullanılan box-shadow ve transition özellikleri ileriki konularımızda anlatılmıştır.
::after kullanarak kutulardan sonra gölge efekti ekleme Kendin Dene

YORUMLAR



CSS Dersine Ait Diğer Konular: