Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
8.0 | 1.0 + | 7.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
Значення за умовчанням | Порожній рядок |
---|---|
Успадковується | Ні |
Застосовується | До псевдоелементи |
Посилання на специфікацію | http://www.w3.org/TR/CSS21/generate.html#content |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Властивість content дозволяє вставляти генерується утримання в текст веб-сторінки, яке спочатку в тексті відсутній. Застосовується спільно з псевдоелементи : after і : before, вони відповідно вказують відображати новий вміст після або до елемента, до якого додаються.
Синтаксис
content: рядок | attr (параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit
Значення
- Рядок
- Текст, який додається на веб-сторінку, рядок при цьому повинна братися в подвійні або одинарні лапки. Допускається використовувати юнікод для вставки спецсимволов. Спецсимволи 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
- Успадковує значення батька.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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 відповідно.