CSS Content: Tips and Tricks for Enhancing Your Website's Visual Appeal

CSS свойство content используется для добавления дополнительного содержимого в элементы HTML без изменения исходного HTML-кода. Содержимое может быть добавлено к пустому элементу, а также может заменить существующий текст или содержимое элемента.

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

HTML:

  
Item 1
  
Item 2
  
Item 3
  
Item 4

CSS:

li::before {
  content: "• ";
}

Этот CSS-код добавит точку и пробел перед каждым элементом списка, создавая маркированный список. "::before" является псевдоэлементом, который создает контейнер для контента, который будет добавлен к каждому элементу списка.

Содержимое, добавленное с помощью свойства content, может быть текстом (в кавычках), атрибутами элемента HTML (в квадратных скобках) или изображениями (указанными в функции url()).

Например, следующий CSS-код добавляет значок социальной сети Facebook перед элементов со ссылкой на страницу Facebook в меню:

a[href="https://www.facebook.com"]::before {
  content: url('facebook-icon.png');
}

В заключение, CSS свойство content позволяет добавлять дополнительное содержимое к элементам HTML при помощи CSS-кода без изменения исходного HTML-кода. Оно может быть использовано для создания маркированных списков, добавления значков или иконок, а также для других целей.