Псеўдаэлемент before

Псеўдаэлемент before устаўляе тэкст перад элементам. Выкарыстоўваецца толькі сумесна са ўласцівасцю content, якая задае тэкст, які трэба ўставіць.

Сінтаксіс

cssселектар::before {
  content: 'тэкст';
}

Прыклад

Давайце зробім так, каб пры навядзенні на li яму ў пачатак уставіўся тэкст:

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: '!!!';
}

Результат:

Прыклад

Да ўстаўляемага тэксту можна ўжываць розныя стылі. Афарбуем, напрыклад, гэты тэкст у які-небудзь колер:

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: '!!!';
}

Результат:

Глядзіце таксама