Дмитрий Нечаев
Свойство content в CSS. Полное руководство с примерами
Свойство content
в CSS используется для вставки контента в элемент, созданный с помощью псевдоэлементов ::before
и ::after
. Это позволяет добавлять текст, изображения, символы и другие элементы на страницу без изменения HTML-разметки. В этой статье мы подробно рассмотрим свойство content
, его применение и приведём примеры использования для различных ситуаций.
Основы использования свойства content
Свойство content
применяется исключительно к псевдоэлементам ::before
и ::after
. Оно позволяет вставлять различные виды контента, такие как строки текста, изображения, символы Unicode и даже генерируемый контент.
Пример базового использования свойства content
/* Добавление контента перед элементом */
p::before {
content: "Примечание: ";
}
/* Добавление контента после элемента */
p::after {
content: " (конец)";
}
<p>Это пример текста.</p>
В этом примере перед текстом абзаца добавляется слово "Примечание: ", а после текста добавляется слово "(конец)".
Виды контента, поддерживаемые свойством content
Строки текста
Самый простой способ использования свойства content
— это добавление строк текста.
p::before {
content: "Важное: ";
}
Символы Unicode
Можно добавлять символы Unicode, используя код символа.
p::after {
content: "\\2605"; /* Добавление символа звезды */
}
URL-адреса изображений
Можно вставить изображение, указав URL.
p::before {
content: url('icon.png');
}
Атрибуты элементов
Можно вставлять значения атрибутов элементов, используя функцию attr()
.
a::after {
content: " (" attr(href) ")";
}
Примеры использования свойства content
Добавление кавычек к цитатам
Псевдоэлементы и свойство content
можно использовать для добавления кавычек к цитатам.
blockquote::before {
content: open-quote;
font-size: 2em;
vertical-align: -0.4em;
color: lightgray;
}
blockquote::after {
content: close-quote;
font-size: 2em;
vertical-align: -0.4em;
color: lightgray;
}
<blockquote>Это пример цитаты.</blockquote>
Добавление иконок к ссылкам
Можно использовать свойство content
для добавления иконок перед или после ссылок.
a::before {
content: url('icon.png');
margin-right: 5px;
}
<a href="#">Ссылка с иконкой</a>
Создание настраиваемых списков
Псевдоэлементы и свойство content
можно использовать для создания настраиваемых маркеров списков.
ul.custom-list li::before {
content: "•";
color: red;
font-size: 1.5em;
margin-right: 10px;
}
<ul class="custom-list">
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
Использование атрибутов элементов
Можно использовать атрибуты элементов для вставки их значений в контент.
a::after {
content: " (" attr(href) ")";
color: gray;
}
<a href="<https://example.com>">Пример ссылки</a>
Генерируемый контент
Можно создавать сложный генерируемый контент, используя комбинацию текста, символов Unicode и атрибутов.
div::before {
content: "🌟 " attr(data-title) " 🌟";
display: block;
font-size: 1.2em;
margin-bottom: 10px;
color: gold;
}
<div data-title="Заголовок">Это пример текста с генерируемым заголовком.</div>
Сложные примеры использования свойства content
Создание ленточки "Новинка"
Можно создать ленточку "Новинка" для товара на странице интернет-магазина.
.product::before {
content: "Новинка";
position: absolute;
top: 10px;
right: 10px;
background-color: red;
color: white;
padding: 5px;
font-size: 0.8em;
transform: rotate(45deg);
}
<div class="product">
<img src="product.jpg" alt="Продукт">
<p>Описание продукта</p>
</div>
Добавление текста к прогресс-бару
Можно добавить текст поверх прогресс-бара, отображающий текущий процент выполнения.
.progress {
position: relative;
width: 100%;
background-color: #e0e0e0;
height: 30px;
border-radius: 5px;
overflow: hidden;
}
.progress::after {
content: attr(data-progress) "%";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
color: white;
}
.progress-bar {
width: 75%; /* Пример текущего прогресса */
height: 100%;
background-color: #76c7c0;
}
<div class="progress" data-progress="75">
<div class="progress-bar"></div>
</div>
Создание полей ввода с кастомным плейсхолдером
Можно создать кастомные плейсхолдеры для полей ввода.
input::placeholder {
color: lightgray;
font-style: italic;
}
input:focus::placeholder {
color: transparent; /* Скрытие плейсхолдера при фокусе */
}
<input type="text" placeholder="Введите ваше имя">
Заключение
Свойство content
в CSS является мощным инструментом для добавления контента, которого нет в исходной HTML-разметке. Оно позволяет создавать сложные декоративные элементы, добавлять иконки, кавычки, текст и другие элементы без изменения структуры HTML. Понимание различных способов использования свойства content
, а также его комбинирование с псевдоэлементами ::before
и ::after
, помогает разработчикам создавать более гибкие и адаптивные стили. Экспериментируйте с различными подходами и находите оптимальные решения для ваших проектов.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile