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 значень:

url

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

автор: Svitlana

правити

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

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	4	12	8

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

Переглядач
	4.4	18	4	1

Приклади

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

<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;
}

<h1>Цитата:</h1>

<blockquote>Лапки додані за допомогою властивості <code>content.</code></blockquote>

<cite>css.in.ua</cite>

body {
	font-family: sans-serif;
}

blockquote:before { 
  content: open-quote;
}

blockquote:after { 
  content:close-quote;
}

cite:before { 
  content: "Автор ";
}

<h3 data-note="чернетка">Заголовок статті</h3>

<ol class="steps">
    <li>Підготувати дані</li>
    <li>Перевірити результат</li>
    <li>Опублікувати</li>
</ol>

<p class="dot">Порожній content: "" теж створює псевдоелемент</p>

h3::after {
    content: " (" attr(data-note) ")";
    color: #b03030;
    font-size: 0.7em;
}

.steps {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.steps li {
    counter-increment: step;
}

.steps li::before {
    content: "Крок " counter(step) ". ";
    font-weight: bold;
    color: #2b6cb0;
}

.dot::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    background: #2b6cb0;
    border-radius: 50%;
    vertical-align: middle;
}

<p>Вибери потрібне значення для <code>content</code>:</p>
<p class="notice">Так як псевдоелементи ::before i ::after не є елементами DOM, їх не можна змінювати через JavaScript. Але є хитрість: змінювати значення атрибуту, який заданий для властивості content.</p>

<input type="text" placeholder="введи значення" id="field">

<hr>

<div id="block" data-before="CSS">, це ти?</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#field {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  font-size: 25px;
  color: #222;
  margin-top: 36px;
}

#block:before {
  content: attr(data-before);
  text-decoration: underline;  
  color: #444;
}

.notice {
  font-style: italic;
  text-align: left;
  padding-left: 16px;
  border-left: 1px solid #ddd;
  color: #444;
}

var block = document.getElementById('block');
var field = document.getElementById('field');

field.onchange = function () {
  block.setAttribute('data-before', this.value);
};
//# sourceURL=pen.js