# Псевдоэлемент after

Псевдоэлемент `after` вставляет текст после элемента. Используется только совместно со свойством `content`, которое задает текст, который следует вставить.

## Синтаксис

`селектор::after { content: 'текст'; }`

## Пример

Давайте сделаем так, чтобы по наведению на `li` в его конец вставился текст:

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `li:hover::after { content: '!!!'; }`

:

## Пример

К вставляемому тексту можно применять различные стили. Покрасим, к примеру, этот текст в какой-нибудь цвет:

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `li:hover::after { color: red; content: '!!!'; }`

:

## Смотрите также

- псевдоэлемент `before`,
  который делает вставку перед текстом тега
- функцию `attr`,
  которая получает значение атрибута тега
- свойство `counter-increment`,
  которое задает автоматическую нумерацию

← →
↑
en ru