css властивість content

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

Застосовується спільно з псевдоелементами :"after і ::before, вони відповідно додають новий вміст спереду або вкінці вмісту елемента.

Властивість content може бути корисною для того, щоб наприклад, створювати нумеровані заголовки, замінювати елементи зображеннями чи мультимедійним вмістом або вставляти перед розділом відповідного елемента слова "Глава", "Приклад", "Рисунок" тощо. Замість того, щоб додати цей вміст до самого HTML-документа, ви можете використовувати CSS для автоматичного його створення.

Ви можете використовувати попередньо визначений вміст (наприклад, відкриваючі лапки), рядок, зовнішній ресурс (такий як зображення), лічильник або значення атрибута.

правити

Нотатка

IE8 підтримує властивість тільки якщо вказаний !DOCTYPE.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

Властивість content може отримувати 12 значень:

normal

Значення без задання. Задається як none для псевдоелементів :before і :after

автор: Svitlana

правити

none

Не додає ніякого вмісту

автор: Svitlana

правити

counter

Виводить значення лічильника, заданого властивістю counter-reset

автор: Svitlana

правити

attr (атрибут)

Повертає рядок, який є значенням атрибута тега зазначеного в дужках. Наприклад, a:after {content: attr (href)} додасть в кінці назви посилання її адресу, тобто, значення атрибута href. Якщо зазначеного атрибута немає, то повернеться порожній рядок.

автор: Svitlana

правити

string

Текст, який додається на веб-сторінку, рядок при цьому повинен братися в подвійні або одинарні лапки. Допускається використовувати юнікод для вставки спецсимволов. Спецсимволи HTML які починаються з амперсанда (§ наприклад), будуть відображатися як є, тобто, простим текстом (§, а не §)

автор: Svitlana

правити

open-quote

Вставляє відкриваючі лапки, тип яких встановлюється за допомогою CSS властивості quotes

автор: Svitlana

правити

close-quote

Вставляє закриваючі лапки, тип яких встановлюється за допомогою CSS властивості quotes

автор: Svitlana

правити

no-open-quote

Скасовує додавання відкриваючих лапок

автор: Svitlana

правити

no-close-quote

Скасовує додавання закриваючих лапок

автор: Svitlana

правити

url

Абсолютний або відносна адреса файлу (зображення, звук, відео тощо). Якщо вказаний файл браузер не може відобразити, значення ігнорується.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
content	1.0	1.0	1.0	4.0	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
content	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p><a href="https://css.in.ua">Довідник CSS</a> — адреса допишеться в дужках сама.</p>

a::after {
    content: " (" attr(href) ")";
}

<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
    <li>третій пункт</li>
</ul>

ul {
    list-style: none; /* прибрати типові маркери */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li::before {
    content: "•"; /* власний маркер */
    padding-right: 8px;
    color: blue;
}