CSS приклад: content

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0	1.0+	7.0+	1.0+	1.0+	1.0+	1.0+

Значення по умовчанню: Порожня строка

Наслідується: Ні

Застосовується до: До псевдоелементів :before і :after

Посилання на специфікацію: http://www.w3.org/TR/CSS21/generate.html#content

Версії CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Опис

Властивість content дозволяє вставляти згенерований вміст у текст веб-сторінки, який спочатку відсутній в тексті. Використовується разом з псевдоелементами :after і :before, які відповідно вказують відображати новий вміст після або перед елементом, до якого додається.

Синтаксис

Значення

Строка: Текст, який додається на веб-сторінку, строка при цьому повинна братися в подвійні або одинарні лапки. Допускається використання юнікоду для вставки спеціальних символів. Спеціальні символи HTML, що починаються з амперсанду (§ наприклад), будуть відображатися як є, тобто простим текстом (§, а не §).
attr(параметр): Повертає строку, яка є значенням параметра тега, вказаного в дужках. Наприклад, a:after {content: attr(href)} додасть після посилання його адресу, тобто значення атрибута href. Якщо вказаного атрибута немає, буде повернена порожня строка.
open-quote: Вставляє відкриваючу лапку, тип якої встановлюється за допомогою стильового властивості quotes.
close-quote: Вставляє закриваючу лапку.
no-open-quotes: Скасовує додавання відкриваючої лапки.
no-close-quote: Скасовує додавання закриваючої лапки.
url: Абсолютна або відносна адреса вставленого об'єкта. Якщо вказаний файл браузер не може відобразити, то значення ігнорується.
counter: Виводить значення лічильника, заданого властивістю counter-reset.
none: Не додає жодного вмісту.
normal: Встановлюється як none для псевдоелементів :before і :after.
inherit: Наслідує значення батька.

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>content</title>
  <style>
   .tag {
    color: navy; /* Цвет текста */
    font-family: monospace; /* Моноширинний шрифт */
    quotes: "<" ">"; /* Встановлюємо вигляд лапок */
   } 
   .tag:before {
    content: open-quote; /* Додаємо перед текстом відкриваючу лапку */
  }
   .tag:after {
    content: close-quote; /* Додаємо після тексту закриваючу лапку */
   }
  </style>
 </head>
 <body>
  <p>Тег <span class="tag">DEL</span> використовується для виділення тексту, який був вилучений в новій версії документа.</p> 
 </body>
</html>

Результат даного прикладу показаний на рис. 1.

Браузери

Firefox до версії 2.0 включно та Opera до версії 9.2 включно не підтримують значення none. Safari до версії 3.1 не підтримує значення none і normal.

Chrome і Safari підтримують властивість quotes для додавання лапок з версії 11.0 і 5.1 відповідно.

Контент

Часті запитання

Q: Як використовувати content в CSS?

A: content використовується для вставлення змісту в елементи, які генерують псевдоелементи (::before, ::after) або для зміни вмісту елемента з атрибутом content.
Q: Де можна використовувати content в CSS?

A: content можна використовувати для додавання тексту, зображень або символів до елементів. В основному це використовується для стилізації псевдоелементів (::before, ::after).
Q: Як можна використовувати content для вставки зображень в CSS?

A: Для вставки зображень за допомогою content потрібно використовувати url() та вказати шлях до зображення. Наприклад, content: url('шлях_до_зображення.jpg');
Q: Чи можна використовувати content для вставки HTML-коду в CSS?

A: Ні, content не може використовуватися для вставки HTML-коду в CSS. Він призначений тільки для вставки тексту, зображень або символів.
Q: Як можна стилізувати вміст, який додається за допомогою content в CSS?

A: Вміст, який додається за допомогою content, можна стилізувати так само, як і будь-який інший текст в CSS. Використовуйте властивості, такі як font-size, color, font-weight тощо.