Css selector (seçiciler) konularında önemli olan bir kaç tane konuyu sizlere anlatmıştım bir kaç gün önce. Bu aralar ne anlatsam diye düşünüp dururken  uzun süredir aklımda olan ve bir türlü aklıma gelmeyen ::before ve ::after seçicilerini hazır hatırlamışken sizlere anlatmak istedim.  Sanırım Css seçicilerinden en faydalı olanlardandır bu iki uyuz kardeş.

Kimi zaman benim gibi düşünmeden makalelerin içine (şimdilik hatırladığım tek örnek bu)  demo, download butonları gibi özellikler ekler ve yazmış olduğunuz yazıların sayısı binlere ulaştığında teker teker konuları açıp ek özellikler ekleme ihtiyacı duyarsınız. Mesela demo butonunun önüne incele kelimesini ve download butonunun yanına da indir kelimesini eklemek isterseniz eğer teker teker yazıları açıp düzeltmeniz gerektiğini düşünürsünüz. Halbuki bütün konulara kolay bir şekilde ::before ve ::after seçicileri ile müdahale etmeniz mümkündür.

İsterseniz herhangi bir Html etiketinin önüne-arkasına content değeri ile yazı eklersiniz ve isterseniz de başka Css değerleri eklersiniz. Tamamen sizin tercihinize ve isteklerinize kalmış olan bir şeydir. İsimlerinden de anlayacağınız gibi before önce demek ve after de sonra demek oluyor. Yapmanız gereken düzenleme yapmak istediğiniz etiketten sonra Css kodlar içinde bu iki kardeşten birini kullanmak.

Css ::before kullanımı

Html <p>  etiketi eklemiş olduğumuz yazılardan önce “Önemli” kelimesini ekleyelim.

Mesela aşağıdaki satırların soluna yani kelimelerden önce “Önemli >>” kelimesini eklemek istiyoruz Css ile

<p>1 mintik.com</p>
<p>2 mintik.com</p>
<p>3 mintik.com</p>
<p>4 mintik.com</p>
<p>5 mintik.com</p>

Bunun için yapmamız gereken stil kodları içinde p etiketi oluşturarak hemen sonrasında ::before selector eklemek. Örnek : p::before şeklinde olması gerekiyor.

Ben <p> etiketi şeklinde anlatıyorum, siz kendinize göre düzenlemek istediğiniz bir Css sınıf (örnek: .sınıf) veya id (örnek: #id) üzerinde de kullanabilirsiniz.

Content değerini kullanarak dilerseniz Font Awasome ikonlarını da ekleyebilirsiniz. Font Awasome ile mintik.com yazısından önce yıldız ekleyelim şimdi.

Örnekleri bu şekilde dilediğimiz kadar çoğaltabiliriz. Bir de box-shadow ekleyerek yıldızları gölgelendirelim şimdi.

Css ::after kullanımı

::after kullanımı da aynıdır düzenleme yapmak istediğiniz elementten sonra ekleyerek istediğimiz değerleri giriyoruz.  Yine aynı p etiketinde yaptığımız değişiklikleri uyguluyoruz bunda da.

Mintik.com yazısından hemen sonra Harika kelimesini ekleyelim.

Yazıdan hemen sonra herhangi bir Font Awasome ikonu ekleyelim.

Örnekleri bu şekilde dilediğimiz kadar çoğaltabiliriz. Bir de box-shadow ekleyerek yıldızları gölgelendirelim şimdi.

Gördüğünüz gibi kullanımı oldukça basittir ancak Internet Explorer 8 ve önceki sürümlerde bu özelliği kullanamıyoruz maalesef. Örnek olarak p etiketi üzerinde anlatım yaptığım için sizi şaşırtmasın. Aklınıza gelebilecek bütün Html etiketlerine bu özelliği uygulayabilirsiniz. Bütün satırlara değilde sadece belirli sıralarda bu değeri kullanmak isterseniz şuradaki yazıdan nth kardeşlerin kullanımını okuyarak nasıl yapacağınızı öğrenebilirsiniz.

Farkında olmadan Css content değerini de anlatmış oldum sanırım. Neyse fazla bilgi göz çıkarmaz 🙂