содержимое

Значение может быть:

• Одним из двух ключевых слов — none или normal.
• <content-replacement> при замене узла DOM. <content-replacement> всегда является <image>.
• Список <content-list> при замене псевдоэлементов и полей отступов. Список <content-list> — это список одного или нескольких анонимных встроенных блоков, появляющихся в указанном порядке. Каждый элемент списка <content-list> относится к типу <string>, <image>, <counter>, <quote>, <target> или <leader()>.
• Необязательный альтернативный текст <string> или <counter>, предваряемый косой чертой (/).

Ключевые слова и типы данных, упомянутые выше, описаны более подробно ниже:

none

При применении к псевдоэлементу, псевдоэлемент не генерируется. При применении к элементу значение не оказывает влияния.

normal

Значение по умолчанию. Вычисляется как none для псевдоэлементов ::before и ::after. Для других псевдоэлементов содержимое будет начальным (или нормальным) ожидаемым содержимым для ::marker, ::placeholder или ::file-selector-button. Для обычных элементов или полей отступов страницы это вычисляется как потомки элемента.

<string>

Последовательность символов, заключённая в одинарные или двойные кавычки. Несколько строковых значений будут конкатенированы (в CSS нет оператора конкатенации).

<image>

<image>, представляющий изображение для отображения. Оно может быть равно <url>, image-set() или <gradient>, или частью веб-страницы, определённой функцией element().

<counter>

Значение <counter> — это счётчик CSS, как правило, число, полученное по результатам вычислений, определённых свойствами <counter-reset> и <counter-increment>. Оно может быть отображено с помощью функции counter() или counters().

counter()

Функция counter() имеет две формы: 'counter(name)' или 'counter(name, style)'. Сгенерированный текст — значение самого внутреннего счётчика с данным именем в области видимости в указанном псевдоэлементе. Оно отформатировано в указанном <list-style-type> (decimal по умолчанию).

counters()

Функция counters() также имеет две формы: 'counters(name, string)' или 'counters(name, string, style)'. Сгенерированный текст — значение всех счётчиков с данным именем в области видимости в указанном псевдоэлементе, от внешнего к внутреннему, разделённые указанной строкой. Счётчики отображаются в указанном <list-style-type> (decimal по умолчанию).

<quote>

Тип данных <quote> включает ключевые слова, зависящие от языка и позиции:

open-quote и close-quote

Эти значения заменяются соответствующей строкой из свойства quotes.

no-open-quote и no-close-quote

Не вставляет содержимое, но увеличивает (уменьшает) уровень вложенности для кавычек.

<target>

Тип данных <target> включает три функции целевого назначения, <target-counter()>, <target-counters()>, и <target-text()>, которые создают перекрестные ссылки, полученные от целевого конца ссылки. См. Формальный синтаксис.

<leader()>

Тип данных <leader()> включает функцию лидера: leader( <leader-type> ). Эта функция принимает ключевые слова dotted, solid, или space (равные leader("."), leader("_"), и leader(" "), соответственно), или строковое значение <string> в качестве параметра. При поддержке и использовании в качестве значения для content, предоставленный тип лидера будет вставлен как повторяющийся узор, визуально соединяющий содержимое по горизонтали.

attr(x)

Функция CSS attr(x) извлекает значение атрибута выбранного элемента или элемента, породившего псевдоэлемент. Значение атрибута элемента x — это необработанная строка, представляющая имя атрибута. Если атрибута x нет, возвращается пустая строка. Чувствительность к регистру параметра имени атрибута зависит от языка документа.

альтернативный текст: / <string> | <counter>

Альтернативный текст может быть указан для изображения или любого элемента <content-list> путём добавления слэша и последующей строки текста или счётчика. Альтернативный текст предназначен для голосового вывода экранных читателей, но может также отображаться в некоторых браузерах. Обратите внимание, что если браузер не поддерживает альтернативный текст, объявление content будет считаться недопустимым и будет проигнорировано. Типы данных / <string> или / <counter> задают "альтернативный текст" для элемента.

content = 
  normal                                              |
  none                                                |
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?  |
  <element()>                                         

<content-replacement> = 
  <image>  

<content-list> = 
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+  

<counter> = 
  <counter()>   |
  <counters()>  

<attr()> = 
  attr( <attr-name> <attr-type>? , <declaration-value>? )  

<element()> = 
  element( <id-selector> )  

<image> = 
  <url>       |
  <gradient>  

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<content()> = 
  content( [ text | before | after | first-letter | marker ]? )  

<attr-name> = 
  [ <ident-token> '|' ]? <ident-token>  

<attr-type> = 
  type( <syntax> )  |
  string            |
  <attr-unit>       

<id-selector> = 
  <hash-token>  

<url> = 
  <url()>  |
  <src()>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<syntax> = 
  '*'                                                 |
  <syntax-component> [ <syntax-combinator> <syntax-component> ]*  |
  <syntax-string>                                     

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<syntax-component> = 
  <syntax-single-component> <syntax-multiplier>?  |
  '<' transform-list '>'                          

<syntax-combinator> = 
  '|'  

<syntax-string> = 
  <string>  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<syntax-single-component> = 
  '<' <syntax-type-name> '>'  |
  <ident>                     

<syntax-multiplier> = 
  '#'  |
  '+'  

<syntax-type-name> = 
  angle               |
  color               |
  custom-ident        |
  image               |
  integer             |
  length              |
  length-percentage   |
  number              |
  percentage          |
  resolution          |
  string              |
  time                |
  url                 |
  transform-function  

Сгенерированное с помощью CSS содержимое не включено в DOM. По этой причине оно не будет представлено в дереве доступности, и некоторые сочетания вспомогательных технологий/браузеров не объявят его. Если содержимое содержит информацию, критическую для понимания назначения страницы, лучше включить его в основной документ.

Если вставленное содержимое не декоративное, убедитесь, что информация предоставлена вспомогательным технологиям и также доступна при отключенном CSS.

• Поддержка универсального доступа для сгенерированного с помощью CSS содержимого — Tink (2015)
• WCAG, Руководство 1.3: Создание содержимого, которое может быть представлено различными способами
• Понимание критерия успешности 1.3.1 | W3C Понимание WCAG 2.0
• Невыполнение критерия успешности 1.3.1: вставка недекоративного сгенерированного содержимого Техники для WCAG 2.0

Первые пять примеров создают сгенерированное содержимое на псевдоэлементах. Последние три — примеры замещения элементов.

В этом примере вставлен сгенерированный текст после текста элементов, имеющих определенное имя класса. Текст окрашен в красный цвет.

HTML

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

CSS

.new-entry::after {
  content: " New!"; /* The leading space creates separation
                       between the DOM node's content and the generated content
                       being added. */
  color: red;
}

Результат

В этом примере вставляются кавычки разного цвета вокруг цитат.

HTML

<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>
<p lang="fr-fr">
  Mais c'est Magritte qui a dit,
  <q lang="fr-fr"> Ceci n'est pas une pipe. </q>.
</p>

CSS

q {
  color: #00f;
}

q::before,
q::after {
  font-size: larger;
  color: #f00;
  background: #ccc;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Результат

Обратите внимание, что тип сгенерированных кавычек зависит от языка. По умолчанию браузеры добавляют открывающие и закрывающие кавычки до и после элементов <q>, поэтому кавычки в этом примере появятся без их явного задания. Их можно было отключить, установив соответствующие значения свойств content и no-open-quote, или установив их оба на none. Их также можно отключить, установив свойство quotes в значение none.

В этом примере комбинируется счётчик, заключённый между двумя <string> перед всеми элементами списка, создавая более подробный маркер для элементов списка (<li>) в неупорядоченных списках (<ol>).

HTML

<ol>
  <li>Dogs</li>
  <li>Cats</li>
  <li>
    Birds
    <ol>
      <li>Owls</li>
      <li>Ducks</li>
      <li>Flightless</li>
    </ol>
  <li>Marsupials</li>
  </li>
</ol>

CSS

ol {
  counter-reset: items;
  margin-left: 2em;
}
li {
  counter-increment: items;
}
li::marker {
  content: "item " counters(items, ".", numeric) ": ";
}

Результат

Сгенерированное содержимое на каждом маркере элемента списка добавляет текст «элемент » в качестве префикса, включая пробел для разделения префикса от счётчика, за которым следует ": ", двоеточие и дополнительный пробел. Функция counters() определяет числовой items счётчик, в котором числа вложенных упорядоченных списков в большинстве браузеров отделяются точкой (.) .

Этот пример полезен для таблиц стилей для печати. Он использует селектор атрибута для выбора каждого полного квалифицированного защищенного ссылки, добавляя значение атрибута href после текста ссылки в качестве содержимого псевдоэлемента ::after.

HTML

<ul>
  <li><a href="https://mozilla.com">Mozilla</a></li>
  <li><a href="/">MDN</a></li>
  <li><a href="https://openwebdocs.org">OpenWebDocs</a></li>
</ul>

CSS

a[href^="https://"]::after
{
  content: " (URL: " attr(href) ")";
  color: darkgreen;
}

Результат

Сгенерированное содержимое — значение атрибута href , предваряемое «URL: », со всеми пробелами в скобках.

В этом примере перед всеми ссылками вставляется изображение. Предоставляются два значения content. Позднее значение content включает изображение с альтернативным текстом, который может быть выведен в качестве речи считывателем экрана. Если браузер не поддерживает альтернативный текст, это объявление будет считаться недействительным, и будет отображаться предыдущее значение content. Это резервное содержимое включает изображение и сообщение « — альтернативный текст не поддерживается — ».

HTML

<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

CSS

CSS для отображения изображения и установки альтернативного текста показан ниже. Он также устанавливает шрифт и цвет для содержимого. Это будет использоваться в браузерах, которые отображают альтернативный текст, и в браузерах, которые не поддерживают альтернативный текст и показывают резервное значение content.

a::before {
  /* fallback content */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " - alt text is not supported - ";
  /* content with alternative text */
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}

Результат

При использовании программы чтения с экрана она должна произнести слово «MOZILLA», когда достигнет изображения. Если поддерживается (если «альтернативный текст не поддерживается» не отображается), вы можете выбрать псевдоэлемент ::before с помощью инструмента выбора инструментов разработчика и просмотреть доступное имя на панели доступности.

В браузерах, не поддерживающих синтаксис альтернативного текста, всё объявление, содержащее альтернативный текст, недействительно. В этом случае используется предыдущее значение content , отображая изображение и текст «альтернативный текст не поддерживается».

В этом примере заменяется обычный элемент! Содержимое элемента заменяется SVG с использованием типа <url>.

Псевдоэлементы не отображаются на заменённых элементах. Поскольку этот элемент заменён, любые соответствующие ::after или ::before не генерируются и не применяются. Для демонстрации этого мы включаем блок объявления ::after, пытаясь добавить id в качестве сгенерированного содержимого. Этот псевдоэлемент не будет сгенерирован, поскольку элемент заменён.

HTML

<div id="replaced">This content is replaced!</div>

CSS

#replaced {
  content: url("mdn.svg");
}

/* will not show if element replacement is supported */
div::after {
  content: " (" attr(id) ")";
}

Результат

При генерации содержимого на обычных элементах (а не только на псевдоэлементах), весь элемент заменяется. Это означает, что ::before и ::after псевдоэлементы не генерируются.

Этот пример демонстрирует, как содержимое элемента можно заменить любым типом <image>, в данном случае, CSS-градиентом. Содержимое элемента заменяется linear-gradient(). С помощью @supports мы обеспечиваем поддержку альтернативного текста и repeating-linear-gradient() для браузеров, поддерживающих альтернативный текст с заменой содержимого элемента.

HTML

<div id="replaced">I disappear</div>

CSS

div {
  border: 1px solid;
  background-color: #ccc;
  min-height: 100px;
  min-width: 100px;
}

#replaced {
  content: linear-gradient(#639f, #c96a);
}

@supports (content: linear-gradient(#000, #fff) / "alt text") {
  #replaced {
    content: repeating-linear-gradient(blue 0, orange 10%) /
      "Gradients and alt text are supported";
  }
}

Результат

Проверьте таблицу совместимости браузеров здесь. Все браузеры поддерживают градиенты и все браузеры поддерживают замену элементов изображениями, но не все браузеры поддерживают градиенты в качестве значения content и не все браузеры поддерживают альтернативный текст для замещающих элементов. Если браузер отображает прямоугольник без градиента, то замена элементов поддерживается, но градиенты не поддерживаются в качестве значения замены содержимого. Если элемент заменён полосатым градиентом, то браузер поддерживает оба этих свойства.

В этом примере содержимое элемента заменяется image-set(). Если у пользователя нормальное разрешение экрана, то будет отображаться 1x.png. На экранах с более высоким разрешением будет отображаться 2x.png изображение.

HTML

<div id="replaced">Mozilla</div>

CSS

#replaced {
  content: image-set(
    "1x.png" 1x,
    "2x.png" 2x
  );
}

Результат

• ::after
• ::before
• ::marker
• contain
• quotes
• <gradient>
• image-set()
• <url>

• Заменённые элементы

• Модуль CSS сгенерированного содержимого

• Модуль CSS списков и счётчиков

• Панели доступности браузера: Инспектор доступности Firefox, Панель доступности Chrome и Дерево доступности Safari