CSS ile before ve after seçicileri nasıl kullanılır?

CSS’in güçlü araçlarından biri olan ::before ve ::after seçicileri, web tasarımında benzersiz ve görsel olarak çekici içerikler oluşturmanın harika bir yoludur. Bu seçiciler, HTML elementlerinin başlangıcına ve sonuna dinamik olarak içerik eklemenize olanak tanır, bu da sayfanızı canlandırır ve daha etkileyici bir görünüm sağlar. Peki CSS ile before ve after seçicileri nasıl kullanılır?

Bir örnek düşünelim: Belki de bir başlık metniniz var ve onun öncesine veya sonrasına hoş bir simge veya süsleme eklemek istiyorsunuz. İşte bu noktada ::before ve ::after seçicileri devreye girer. Bu seçicileri kullanarak, metninizi veya diğer elementlerinizi daha çekici ve dikkat çekici hale getirebilirsiniz.

CSS’te before ve after seçicileri kullanarak HTML sayfalarında sözde ögeler oluşturmak oldukça kolaydır. Bu seçiciler, bir ögenin öncesine veya sonrasına metin veya görsel eklemek için ideal bir araç sağlar. Bu yöntem, özellikle bir ögenin tüm HTML sayfalarına uygulanmasını istediğinizde, manuel olarak her sayfayı düzenlemek yerine daha pratik bir çözüm sunar.

HTML sayfanızda bir ögenin öncesine veya sonrasına bir metin veya görsel eklemek istediğinizi düşünelim. Ancak bu metin veya görsellerin tüm HTML ögelerine uygulanmasını istiyorsunuz. Böylesi bir senaryoda, tüm HTML sayfaları ziyaret ederek teker teker yeni ögeler eklemek oldukça zaman öldürücü olabilir. Bu aşamada CSS’te kullanılan before ve after seçicileri devreye girer.

Aslında bu işlemi JavaScript ile de yapmak mümkündür. Ancak her geliştiricinin JavaScript bilgisi ileri seviye olmayabiliyor. Ayrıca bazı durumlarda JavaScript kullanmak, HTML sayfalar tarayıcıda renderlanırken, yani oluşturulurken gecikmeye sebep olabiliyor. O halde CSS ile bu işlemi daha basit bir hale getirebiliriz.

Kullanım senaryoları

Eğer yazdığınız CSS kodunu global olarak uygularsanız, o halde tüm sayfalarda bu özelliğin ilgili HTML ögelere uygulanmasını sağlarsınız. Örneğin bir tablo içerisinde ilk sütunda yer alan <td> elementlerine before ve after seçicileri uygulayacaksak, o halde yazacağımız kod şöyle olmalı

table td:nth-child(1):before {
  content: "Buraya metin giriyoruz";
}

Eğer bir <div> ögesine uygulayacaksak, o halde onu seçmeliyiz. Ancak burada belirli bir <div> ögesine seçmek istiyorsak, öncelikle onun sınıf ve ID’sini seçmemiz gerekir.

.ornek-class-ismi {
  content: "Buraya metin giriyoruz";
}

Bu senaryoda eğer <div> ögesi bir class veya ID’ye sahipse yeniden <div> ögesini seçmemize gerek yok. Doğrudan class veya ID ile ilgili HTML ögeyi seçebiliriz. Eğer ilgili <div> ögesinin içerisinde bir başka ögeyi seçeceksek o halde:

.ornek-class-ismi span {
  content: "Buraya metin giriyoruz";
}

Böylece “ornek-class-ismi” sınıfına sahip class içerisindeki <span> ögesini seçmiş oluyoruz. Aşağıdaki örnek sözde bir element örneği canlı olarak gösterilmiştir.

• Daha fazla kaynağa mı ihtiyacınız var? MDN dökümantasyonunu inceleyin: ::before – CSS: Cascading Style Sheets | MDN (mozilla.org)

Örnek Girdi

<p id="pseudo-sample">Bu bir paragraf elementidir ve bu paragraf elementinin öncesine :before kullanılarak sözde element uygulanmıştır.</p>
<style>
 #pseudo-sample:before {
  content: "Bu bir örnek sözde elementtir. ";
  font-size: 10px;
}
</style>

Örnek Çıktı

Bu bir paragraf elementidir ve bu paragraf elementinin öncesine :before kullanılarak sözde element uygulanmıştır.

Alternatif senaryolar

• Liste Elemanlarına İkon Ekleme:
  HTML’de bulunan bir liste ögesinin her bir elemanına, örneğin bir ok işareti eklemek istiyorsanız:

ul li:before {
  content: "\2022"; /* Bullet karakteri */
  margin-right: 0.5em; /* İkon ile metin arasındaki boşluk */
}

• Bağlantıların Sonuna İkon Ekleme:
  Tüm bağlantıların sonuna bir dış bağlantı simgesi eklemek istiyorsanız:

a:after {
  content: url(dıs-baglanti-ikonu.png);
  margin-left: 0.5em; /* İkon ile metin arasındaki boşluk */
}

• Buton Stillerini Geliştirme:
  Butonların yanına veya üstüne ekstra bir simge ekleyerek butonları daha görsel olarak zenginleştirmek istiyorsanız:

.button:before {
  content: url(simge.png);
  margin-right: 0.5em; /* İkon ile metin arasındaki boşluk */
}

• Form Girişlerine Ek Bilgi Ekleme:
  Form girişlerinin yanına ek bir bilgi eklemek istiyorsanız:

input[type="text"]:after {
  content: "Bu alan gereklidir";
  color: red;
  margin-left: 0.5em; /* Metin ile giriş alanı arasındaki boşluk */
}

• Süslemeler İçin Arka Plan Ekleme:
  Belirli bir ögeye arka plan resmi eklemek istiyorsanız:

.ornek-oge:before {
  content: "";
  background-image: url(arka-plan-resmi.jpg);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ögenin arkasında olmasını sağlar */
}

Bu senaryolar, CSS’de before ve after seçicilerinin farklı kullanımlarını göstermektedir. Bu seçiciler, HTML ve CSS’i daha esnek ve zengin bir deneyim sunmak için güçlü bir araçtır.

Desteklenen medya ögeleri

::before ve ::after seçicileri SVG dosyaları destekler. SVG (Scalable Vector Graphics), vektör grafiklerin tanımlanması için XML tabanlı bir dosya formatıdır ve web tasarımında yaygın olarak kullanılır. Bu dosya formatı, CSS ile kolayca stilize edilebilir.

::before ve ::after seçicileri, CSS’de herhangi bir içeriği eklemek için kullanılabilir. Bu içerik metin, resim, arka plan rengi veya SVG gibi medya ögeleri olabilir. Dolayısıyla, SVG dosyaları da bu seçicilerle kullanılabilir.

SVG dosyalarının yanı sıra, ::before ve ::after seçicileri ile genellikle kullanılan diğer medya ögeleri şunlardır:

• Metin: Özel bir metin eklemek için kullanılabilir.
• İkon fontları: Font ikonlarını göstermek için kullanılabilir.
• CSS3 grafikler: CSS3 özellikleri ile oluşturulan grafikler, örneğin daire, dikdörtgen vb.
• Veri URL’leri: Resim veya diğer medya ögelerini içeren veri URL’leri de kullanılabilir.

Bu medya ögeleri, content özelliği aracılığıyla ::before ve ::after seçicileriyle eklenir. Örneğin:

.element::before {
    content: url('image.svg'); /* SVG dosyasını eklemek */
}

veya

.element::after {
    content: "\e001"; /* İkon fontunu eklemek */
    font-family: 'FontName';
}

Bu örneklerde gösterildiği gibi, SVG dosyalarını veya diğer medya ögelerini eklerken, content özelliği içinde URL veya karakter kodlaması kullanılır. Bu şekilde, ::before ve ::after seçicileri ile istediğiniz medya ögelerini ekleyebilirsiniz.

Kodları nerede uygulayabilirim?

Eğer WordPress kullanıyorsanız alan adınızın sonuna “/wp-admin/customize.php ekleyerek özelleştirme sayfasına gidin. Orada “Ek CSS” veya ayarlarınız İngilizce ise “Additional CSS” bölümüne tıklayın. Karşınıza çıkan metin editörü sizlere CSS kodlarınızı yazma alanı sunar. Yazdığınız kodları burada test ederek uygulayabilirsiniz.

Eğer VS Code’da çalışıyorsanız, HTML sayfanızda <style> etiketi oluşturup CSS kodlarınızı buraya yazabilirsiniz. Ya da ayrı bir CSS dosyası oluşturarak (örneğin: style.css) HTML sayfanıza bağlayabilirsiniz.