Pseudo element after

after pseudo elementi, öğeden sonra metin ekler. Sadece, eklenecek metni belirleyen content özelliği ile birlikte kullanılır.

Sözdizimi

cssseçici::after {
  content: 'metin';
}

Örnek

li üzerine gelindiğinde sonuna metin eklenmesini sağlayalım:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:hover::after {
  content: '!!!';
}

Результат:

Örnek

Eklenen metne çeşitli stiller uygulanabilir. Örneğin, bu metni bir renge boyayalım:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

cssli:hover::after {
  color: red;
  content: '!!!';
}

Результат:

Ayrıca bakınız