Pseudo element before

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

Sözdizimi

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

Örnek

li üzerine gelindiğinde başına 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::before {
  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::before {
  color: red;
  content: '!!!';
}

Результат:

Ayrıca bakınız