css властивість content
Властивість content дозволяє внести зміни в згенерований текст веб-сторінки, після її завантаження.
Застосовується спільно з псевдоелементами :"after і ::before, вони відповідно додають новий вміст спереду або вкінці вмісту елемента.
Властивість content може бути корисною для того, щоб наприклад, створювати нумеровані заголовки, замінювати елементи зображеннями чи мультимедійним вмістом або вставляти перед розділом відповідного елемента слова "Глава", "Приклад", "Рисунок" тощо. Замість того, щоб додати цей вміст до самого HTML-документа, ви можете використовувати CSS для автоматичного його створення.
Ви можете використовувати попередньо визначений вміст (наприклад, відкриваючі лапки), рядок, зовнішній ресурс (такий як зображення), лічильник або значення атрибута.
автор: Svitlana
- Нотатка
-
IE8 підтримує властивість тільки якщо вказаний
автор: Svitlana!DOCTYPE.
Синтаксис
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Властивість content може отримувати 12 значень:
-
normal -
Значення без задання. Задається як none для псевдоелементів
автор: Svitlana:beforeі:after -
none -
Не додає ніякого вмісту
автор: Svitlana -
counter -
Виводить значення лічильника, заданого властивістю
автор: Svitlanacounter-reset -
attr (атрибут) -
Повертає рядок, який є значенням атрибута тега зазначеного в дужках. Наприклад,
автор: Svitlanaa:after {content: attr (href)}додасть в кінці назви посилання її адресу, тобто, значення атрибута href. Якщо зазначеного атрибута немає, то повернеться порожній рядок. -
string -
Текст, який додається на веб-сторінку, рядок при цьому повинен братися в подвійні або одинарні лапки. Допускається використовувати юнікод для вставки спецсимволов. Спецсимволи HTML які починаються з амперсанда (
автор: Svitlana§наприклад), будуть відображатися як є, тобто, простим текстом (§, а не §) -
open-quote -
Вставляє відкриваючі лапки, тип яких встановлюється за допомогою CSS властивості
автор: Svitlanaquotes -
close-quote -
Вставляє закриваючі лапки, тип яких встановлюється за допомогою CSS властивості
автор: Svitlanaquotes -
no-open-quote -
Скасовує додавання відкриваючих лапок
автор: Svitlana -
no-close-quote -
Скасовує додавання закриваючих лапок
автор: Svitlana -
url -
Абсолютний або відносна адреса файлу (зображення, звук, відео тощо). Якщо вказаний файл браузер не може відобразити, значення ігнорується.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | За допомогою Javascript не можна задати псевдоклас конкретному елементу, але існують інші способи домогтися потрібного результату. |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Функція attr() у content читає атрибут елемента: після кожного посилання в дужках допишеться його href.
HTML
<p><a href="https://css.in.ua">Довідник CSS</a> — адреса допишеться в дужках сама.</p>CSS
a::after {
content: " (" attr(href) ")";
}Свої маркери списку замість браузерних: типові вимкнено через list-style: none, а ::before домальовує кожному пункту синій маркер.
HTML
<ul>
<li>перший пункт</li>
<li>другий пункт</li>
<li>третій пункт</li>
</ul>CSS
ul {
list-style: none; /* прибрати типові маркери */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* власний маркер */
padding-right: 8px;
color: blue;
}Різні значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!