CSS-свойство content заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства content являются анонимными property are anonymous замещаемыми элементами.
/* Ключевые слова, которые нельзя комбинировать с другими значениями */
content: normal;
content: none;
/* значение <url> */
content: url("http://www.example.com/test.png");
/* значение <image> */
content: linear-gradient(#e66465, #9198e5);
/* указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after */
/* значение <string> */
content: "prefix";
/* значения <counter> */
content: counter(chapter_counter);
content: counters(section_counter, ".");
/* значение attr() связано со значением атрибута HTML */
content: attr(value string);
/* языко- и позиция-зависимые ключевые слова */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* несколько значений могут использоваться вместе */
content: open-quote chapter_counter;
/* глобальные значения */
content: inherit;
content: initial;
content: unset;
{{cssinfo}}
nonenormalnone для псевдоэлементов ::before и::after.\000A9 представляет собой символ авторского права.Функция counter() имеет две формы записи: 'counter(имя)' или 'counter(имя, стиль)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию decimal).
Функция counters() также имеет две формы записи: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию decimal).
attr(x)x элемента в виде строки. Если атрибут x отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.open-quote | close-quoteno-open-quote | no-close-quoteВ этом примере вставляются кавычки вокруг кавычек а добавляет слово "Глава" перед заголовками.
<h1>5</h1>
<p>According to Sir Tim Berners-Lee,
<q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
lucky enough to invent the Web at the time when the Internet
already existed - and had for a decade and a half.</q>
We must understand that there is nothing fundamentally wrong
with building on the contributions of others.
</p>
<h1>6</h1>
<p>According to the Mozilla Manifesto,
<q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
must have the ability to shape the Internet and
their own experiences on the Internet.</q>
Therefore, we can infer that contributing to the open web
can protect our own individual experiences on it.
</p>
q {
color: blue;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
h1::before {
content: "Chapter "; /* Пробел в конце создаёт разделение
между добавленным контентом
и остальным контентом*/
}
{{EmbedLiveSample('Заголовки_и_двойные_кавычки', '100%', 200)}}
В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
a::before {
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
font: x-small Arial, sans-serif;
color: gray;
}
{{EmbedLiveSample('Изображение_в_сочетании_с_текстом', '100%', 60)}}
В этом примере вставляется дополнительный текст после указанных элементов списка.
<h2>Paperback Best Sellers</h2> <ol> <li>Political Thriller</li> <li class="new-entry">Halloween Stories</li> <li>My Biography</li> <li class="new-entry">Vampire Romance</li> </ol>
.new-entry::after {
content: " New!"; /* Начальный пробел создаёт разделение
между добавленным контентом
и остальным контентом */
color: red;
}
{{EmbedLiveSample('Целевые_классы', '100%', 160)}}
В этом примере вставляется изображение перед каждой ссылкой и добавляет id атрибут после.
<ul>
<li><a id="moz" href="http://www.mozilla.org/">
Mozilla Home Page</a></li>
<li><a id="mdn" href="https://developer.mozilla.org/">
Mozilla Developer Network</a></li>
</ul>
a {
text-decoration: none;
border-bottom: 3px dotted navy;
}
a::after {
content: " (" attr(id) ")";
}
#moz::before {
content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
}
#mdn::before {
content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
}
li {
margin: 1em;
}
{{EmbedLiveSample('Атрибуты_изображений_и_элементов', '100%', 160)}}
В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением <url> или изменить значение <image> . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.
<div id="replaced">Mozilla</div>
#replaced {
content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
}
#replaced::after { /* не будет отображаться, если замена элемента поддерживается */
content: " (" attr(id) ")";
}
{{EmbedLiveSample('Замена_элемента', '100%', 160)}}
Сгенерированный CSS контент не включён в DOM. Из-за этого он не будет представлен в accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.
{{Compat}}