Псевдоелемент 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: '!!!';
}

Результат:

Вижте също