Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before, они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.
CSS синтаксис
content: значение;
Возможные значения
| Значение | Описание |
|---|---|
| normal | Значение по умолчанию. Нет генерируемого контента. |
| none | Нет генерируемого контента. |
| counter | Выводит значение счетчика, заданного свойством counter-reset. |
| attr(имя атрибута) | Генерирует строку, которая является значением атрибута указанного в скобках. Например, img:after{ content: attr(href) } добавит после изображения его адрес, т.е. значение параметра href. Если указанного атрибута нет, то вернется пустая строка. |
| строка | Генерирует контент в виде заданной текстовой строки. |
| open-quote | Генерирует открывающую кавычку цитирования. |
| close-quote | Генерирует закрывающую кавычку цитирования. |
| no-open-quote | Удаляет, если определена, открывающую кавычку цитирования. |
| no-close-quote | Удаляет, если определена, закрывающую кавычку цитирования. |
| url(URL) | Генерирует медиа-контент (изображение, видео, звук и т.д.) |
| initial | Устанавливает значение по умолчанию. |
| inherit | Значение наследуется от родительского элемента. |
Пример использования
Вставляем после каждой ссылки URL в круглых скобках
a:after {
content: " (" attr(href) ")";
}
