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


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

Приклади


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

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

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

a:after { 


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


}

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

    чи
      шляхом видалення їх маркерів без задання і додавання HTML-об'єкта, який виглядає як маркер (&bull)

      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 */ 
      
      
      }

Додаткові посилання