# after pseudo-element

The `after` pseudo-element inserts a text after an element. It is used only in conjunction with the `content` property, which specifies the text to insert.

## Syntax

`selector::after { content: 'text'; }`

## Example

Let's make it so that when you hover over `li`, text is inserted at the end of it:

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

:

## Example

You can apply different styles to the inserted text. Let's color this text in some color, for example:

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

:

## See also

- the `before` pseudoelement
  that makes an insert before a tag text
- the `attr` function
  that gets a value of a tag attribute
- the `counter-increment` property
  that sets automatic numbering

← →
↑
en ru