Свойство 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, помогает разработчикам создавать более гибкие и адаптивные стили. Экспериментируйте с различными подходами и находите оптимальные решения для ваших проектов.