# Свойство content

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

## Синтаксис

`селектор::after { content: 'текст'; }`
`селектор::before { 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::before { content: '!!!'; } li::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::before { color: red; content: '!!!'; } li::after { color: green; content: '???'; }`

:

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

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

←→
↑