Свойство содержимого CSS3 позволяет добавлять контент на страницу из CSS. Это полезно при стилизации, но это особенно полезно если по какой-то причине у вас нет доступа или нет необходимости редактировать ваши HTML файлы. Свойство content используется в сочетании с псевдо селекторами: before и: after, чтобы контент отображался до или после определенных HTML элементов.
По определению: before и: after - псевдо элементы CSS. Вы можете использовать их для вставки чего-либо до или после содержимого элемента. Есть несколько замечательных статей, посвященных основам, но я хотел записать запись в блоге для реальных случаев использования. Или, по крайней мере, показать, для чего я их использую.
Предположим вы хотите, чтобы после каждого элемента h1 появлялся вопросительный знак. Ниже находится тег h1 до того, как к нему будет применено свойство content, а затем CSS для добавления вопросительного знака после элемента h1 с использованием свойства контента.
Код
h1:after{
content: "?";
}
Результатом вышеуказанного CSS должно быть следующее:
Вы можете добавлять правила стиля к своему псевдо избранному элементу так же как и к любому другому элементу. Вы можете изменить цвет, размер шрифта и даже место размещения, но однако вы можете изменять поля размещения, также добавления, определяя положение псевдо выбранного элемента как абсолютного. Если вы не сделаете этот шаг, любые поля или добавление, которые вы добавите, будут неэффективными.
Код
h1:after{
content: "?";
color: #ff0074;
font-size: 50px;
}
Очень популярно использовать: before или: after для отображения значка. Поскольку вы можете добавить каждое свойство стиля CSS, вы можете сделать вновь созданный элемент блочным и привязать фоновое изображение. Вы даже можете использовать свойство содержимого для вставки изображения в свой HTML с помощью синтаксиса url, как например:
Код
h1:after{
content: url(insert/path/to/image);
}
