Справочники CSS3 content

Информация по поводу - content

Свойство content добавляет дополнительный текст или символ к HTML разметке. Он используется зачастую с псевдоклассами такими, как: ::after и ::before.


Значения свойства:

  • 'слова/символ' - строка с данными, которые будут подставлены в HTML разметку страницы;
  • none - ничего не делает и не добавляет ничего;
  • normal - тоже ничего не делает, но задается для псевдоклассов ::after и ::before;
  • url - добавление объекта по ссылке на него. Если объекта по ссылке не будет, то будет подставлено пустое значение;
  • attr(название) - берет значение атрибута, например: p::after {content: attr(title)}. Таким образом будет взят атрибут title у тега p и он будет подставлен после этого же атрибута в качестве текста.


Пример селектора:
a[target="_blank"]::after { 
	content: ' ->';
	color: #ccc051;
}
HTML код:
<a href="#" target="_blank">Target Black</a>
<br>
<a href="#">Обычная ссылка</a>