Content özelliği

CSS kursu · Orta seviye · Ders 20/98

content özelliği ile sözde element içeriğini öğrenirsin.

content özelliği

::before ve ::after ile eklenen kutular varsayılan olarak boştur; hiçbir şey göstermez. İçinde bir şey görünmesi için content özelliğini yazmalısın. Bu özellik sözde elementlerde zorunludur; yoksa öğe hiç oluşturulmaz.

En basit değer tırnak içinde bir metindir: content: "Not" yazarsan sözde elementte "Not" harf dizisi görünür. Tırnak unutulursa tarayıcı değeri bir CSS anahtar kelimesi sanar ve sessizce yutar.

content değer türleri

content yalnızca düz metin almaz. Üç yaygın değer türü vardır: metin ("Yeni"), görsel (url("ok.svg")) ve öznitelik (attr(href)). Her biri farklı bir görev için uygundur.

Örneğin a::after { content: attr(href); } her bağlantının yanına hedef adresini yazdırır. Bu tek satır, yazdırılan sayfalarda bağlantı adreslerini göstermenin klasik yoludur.

Uygulama ::after ile içerik ekle

Bir .tip sınıf seçicisine ::after sözde elementi ekle. İçine bir content bildirimi (tırnak içinde bir metin), color: navy ve font-weight: bold tanımla.

Örnek çözümü göster

/* ipucu için ::after ekle */
.tip::after {
  content: "İpucu";
  color: navy;
  font-weight: bold;
}

Kendini test et

content olmadan bir ::after ne olur?
```
.note::after {
  color: navy;
}
```
- Boş bir kutu gösterir, içi boş
- Tarayıcı hata verir
- Hiçbir şey göstermez; öğe oluşmaz
- HTML'deki içeriği yineler
Cevabı göster

Hiçbir şey göstermez; öğe oluşmaz — Doğru. ::before ve ::after için content zorunludur; yoksa kutu hiç oluşmaz.

content bildirimini tamamla

a::after {
  ____: '↗';
}

Cevabı göster

a::after {
  content: '↗';
}

content değerini türüne eşle

"Yeni"

Düz metin
url("ok.svg")

Görsel
attr(href)

Öznitelikten alınan
""

Boş değer

Content özelliği