::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