::before ve ::after

::before ve ::after sözde elementlerini öğrenirsin.

::before ve ::after nedir?

CSS'te sözde element (pseudo-element) bir öğenin belirli bir parçasını biçimler; HTML'ye yeni etiket eklemeden. En bilinen ikisi ::before ve ::after'dur. Seçicinin hedeflediği öğenin içine, içerik öncesine ve sonrasına yeni bir kutu yerleştirirler.

Çift kolon (::) sözde element olduğunu gösterir. Tek kolon da çalışır ama çift kolon modern yazımdır. Bu kutular HTML kaynağında yer almaz; yalnızca CSS ile görünür kılınır.

Sözde element yazımı

Sözde element yazımı: seçicinin yanına çift kolon, sonra ad. a::after her bağlantının sonuna bir kutu ekler; .card::before ise class="card" taşıyan her öğenin başına.

Bu kutular gerçek birer öğe gibi davranır: renk, kenar boşluğu, hatta arka plan verilebilir. HTML kaynağında görünmezler; tarayıcı bunları canlı olarak çizer.

Uygulama ::before ile rozet ekle

Bir .badge sınıf seçicisine ::before sözde elementi ekle. İçine bir content bildirimi (tırnak içinde bir metin), color: white ve background: red tanımla.

Örnek çözümü göster

/* rozet için ::before ekle */
.badge::before {
  content: "Yeni";
  color: white;
  background: red;
}

Kendini test et

::after sözde elementi nereye yerleşir?
```
a::after {
  content: '↗';
}
```
- Etiketin hemen öncesine, dışına
- Öğenin içine, içeriğin sonrasına
- Yalnızca body öğesinin içine
- Seçicinin yanına, bağımsız bir öğe olarak
Cevabı göster

Öğenin içine, içeriğin sonrasına — Doğru. ::after öğenin içine, mevcut içeriğin sonrasına bir kutu ekler.

::after sözde elementini yaz

____ {
  content: '↗';
}

Cevabı göster

::after {
  content: '↗';
}

Sözde elementi hedefine eşle

::before

İçeriğin öncesine kutu
::after

İçeriğin sonrasına kutu
::first-letter

İlk harf
::selection

Seçili metin

Sıradaki ders: Content özelliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler