Создание уникального содержимого с помощью CSS

Свойство content в CSS используется для добавления содержимого к элементам на веб-странице. Оно позволяет вам вставлять текст, изображения или символы внутри выбранного элемента. Обычно content используется вместе с псевдоэлементами (::before и ::after), чтобы добавить декоративные элементы или контент, не являющийся прямым потомком элемента.

Давайте рассмотрим примеры использования свойства content:

1. Добавление текста:

p::before {
  content: "Привет, ";
}

В этом примере мы добавляем текст "Привет, " перед каждым элементом <p> на странице.

2. Вставка изображения:

div::after {
  content: url("image.jpg");
}

В данном случае мы добавляем изображение "image.jpg" после каждого элемента <div> на странице.

3. Вставка символа Unicode:

span::before {
  content: "\2713";
}

В этом случае мы добавляем символ "✓" перед каждым элементом <span> на странице, используя его код Unicode.

4. Добавление декоративного элемента:

button::after {
  content: "";
  background: url("icon.png");
  width: 16px;
  height: 16px;
  display: inline-block;
}

В этом примере мы добавляем иконку изображения "icon.png" после каждой кнопки на странице. Мы создаем пустой контент и задаем ему размеры и фоновое изображение.

5. Добавление данных-атрибута:

a::before {
  content: attr(data-tooltip);
  background: yellow;
  padding: 5px;
}

В этом случае мы добавляем содержимое атрибута "data-tooltip" перед каждой ссылкой. За счет использования функции attr() мы можем вставить значение атрибута в content.

Структура свойства content может включать текст, URL, строковые, символьные и функциональные значения. Вы также можете комбинировать несколько значений внутри content, используя разделители, такие как пробелы или запятые.

Важно отметить, что при использовании свойства content необходимо указывать display: block или display: inline-block для псевдоэлемента, чтобы он отображался на странице.