CSS ::after sahte öğesi

Tanım ve Kullanım

CSS ::after Takma elementler, belirtilen elementin içeriğinin ardından içerik eklemek için kullanılır.

Kullanım content Öznitelik belirler, eklenmesi istenen içerik. content'in değeri şu olabilir:

• Dizi: content: "Hello world!";
• Görsel: content: url(myimage.jpg);
• İçerik yok: content: none;
• Sayaç: content: counter(li);
• Sözün sonu: content: close-quote;
• Öznitelik değeri: content: " (" attr(href) ")";

İpucu:Lütfen dikkat edin, eklenen içerik hala belirtilen elementin içindedir. Eklenen içerik, elementin içeriğine eklenir.

Kullanım ::before Belirli bir elementin içeriğinin öncesine bazı içerik ekleyin.

Örnek

Örnek 1

Her <p> öğesinin içeriğinin ardından bir dizi ekleyin:

p::after {
  content: " - Bu hatırlatmayı unutmayın";
}

Kişisel olarak deneyin

Örnek 2

Her <p> öğesinin içeriğinin ardından bir dizi ekleyin ve eklenmiş içeriğin stilini ayarlayın:

p::after {
  content: " - Bu hatırlatmayı unutmayın";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Kişisel olarak deneyin

CSS Grameri

::after {
  css deklarasyonları;
}

Teknik Ayrıntılar

Tarayıcı Desteği

Tabloda belirtilen rakamlar, bu takma elemanın tamamen desteklenen ilk tarayıcı sürümünü belirtir.

İlgili Sayfalar

Eğitim:CSS Takma Elemanları

Referans:CSS ::before sahte öğesi