CSS ::before sahte elementi

Tanım ve kullanım

CSS ::before Sahte elementler, belirtilen elementin içeriği öncesine bazı içerikler eklemek için kullanılır。

Kullanım content Özellik, eklemek istediğiniz içeriği belirtir. content değeri şu olabilir：

• Dizi: content: "Hello world!";
• Görsel：content: url(myimage.jpg);
• İçerik yok：content: none;
• Sayaç：content: counter(li);
• Tırnaklar：content: open-quote;
• Özellik değeri：content: " (" attr(href) ")";

İpucu：Dikkat edin, eklenen içerik hala belirtilen elementin içindedir. Eklenen içerik, elementin içeriğine eklenir ve diğer içerikler öncesine eklenir。

Kullanım ::after Belirli bir elementin içeriği sonrasında bazı içerikler ekleyin。

Örnek

Örnek 1

Her <p> elementinin içeriği öncesine bir dizi ekle：

p::before {
  content: "Bu okuyun: ";
}

Kişisel olarak deneyin

Örnek 2

Her <p> elementinin içeriği öncesine bir dizi ekle ve eklenmiş içeriğin tarzını ayarlayın：

p::before {
  content: "Bu okuyun -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Kişisel olarak deneyin

CSS dilbilgisi

::before {
  css deklarasyonları;
}

Teknik ayrıntılar

Tarayıcı desteği

Tabloda belirtilen rakamlar, bu sahte elementi tamamen destekleyen ilk tarayıcı sürümünü belirtir。

İlgili sayfalar

Eğitim：CSS sahte elementi

Kaynakça：CSS ::after sahte elementi