# The content property

The `content` property allows you to insert arbitrary generated text into tags. It is used together with `after` and `before` pseudo-elements.

## Syntax

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

## Example

Let's insert additional text at the start and end of the `li` tag text:

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

:

## Example

You can apply different styles to 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::before { color: red; content: '!!!'; } li::after { color: green; content: '???'; }`

:

## See also

- the `attr` function
  that gets a value of a tag attribute
- the `counter-increment` property
  that sets automatic numbering

← →
↑
en ru