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

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

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

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

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

Нотатка:

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

Синтаксис

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

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

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

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

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

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

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

no-open-quote: Скасовує додавання відкриваючих лапок

no-close-quote: Скасовує додавання закриваючих лапок

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

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

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

Значення без задання:	normal
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	За допомогою Javascript не можна задати псевдоклас конкретному елементу, але існують інші способи домогтися потрібного результату.

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

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

Мобільних переглядачів ще не додано.

Приклади

Різні значення у дії

See the Pen <a href='https://codepen.io/MichaelBondar/pen/qXwrjB/'>qXwrjB</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад використання

See the Pen <a href='https://codepen.io/MichaelBondar/pen/BdEWRd/'>BdEWRd</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Вставляє URL в дужках після кожного посилання

a:after { 


  content: " (" attr(href) ")"; 


}

Додавання кольору маркерів для

ul { 


  list-style: none; /* Remove list bullets */ 


  padding: 0; 


  margin: 0; 


} 





li { 


  padding-left: 16px; 


} 





li:before { 


  content: "•"; /* Insert content that looks like bullets */ 


  padding-right: 8px; 


  color: blue; /* Or a color you prefer */ 


}