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

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

Сінтаксіс

cssселектар::after {
  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::after {
  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::after {
  color: red;
  content: '!!!';
}

Результат:

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