content

Оновлено: 08.12.2022

content

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

Коротка інформація

Значення за замовчуванням normal
Успадковується Ні
Застосовується До псевдоелементів ::before и ::after
Анімується Ні

Синтаксис

content: <строка> | attr(<атрибут>) | open-quote | close-quote 
 | no-open-quote | no-close-quote | url | counter | normal | none

Значення

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

Приклад

Об'єктна модель

Об'єкт.style.content

Примітка

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


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

Браузери

content

Переглянути сумісність з Can I use?

content