CSS-свойство `content`

Свойство content CSS заменяет содержимое сгенерированным значением. Его можно использовать, чтобы задать, что отображается внутри элемента или псевдоэлемента. Для элементов свойство content определяет, отображается ли элемент обычным образом (normal или none) или заменяется изображением (и соответствующим альтернативным текстом). Для псевдоэлементов и полей полей страницы свойство content задаёт содержимое в виде изображений, текста, того и другого или ничего, определяя, будет ли элемент отображаться вообще.

Объекты, вставленные с помощью свойства content, являются замещаемыми элементами без имени.

Попробуйте

.topic-games::before {
  content: "🎮 " / "games";
}

.topic-weather::before {
  content: "⛅ " / "cloudy";
}

.topic-hot::before {
  content: url("/shared-assets/images/examples/fire.png") / "On fire";
  margin-right: 6px;
}

<p class="topic-games">Game News: A new inFamous is not planned</p>

<p class="topic-weather">
  Weather for Today: Heat, violent storms and twisters
</p>

<p class="topic-hot">Trending Article: Must-watch videos of the week</p>

Синтаксис

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <content-replacement>: <image> values */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/* speech output: alternative text after a "/"  */
content: url("../img/test.png") / "This is the alt text";
content: counter(chapter) / "Chapter " counter(chapter);

/* <string> value */
content: "unparsed text";

/* <counter> values, optionally with <list-style-type> */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/* attr() value linked to the HTML attribute value */
content: attr(href);

/* <quote> values */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

/* Global values */
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;

Значения

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

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

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

none

Если это значение задано для псевдоэлемента, псевдоэлемент не создаётся. Для элемента это значение не оказывает никакого эффекта.

normal

Для псевдоэлементов ::before и ::after это значение вычисляется как none . Для других псевдоэлементов, таких как ::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> | attr()

Альтернативный текст можно задать для изображения или любых элементов <content-list>, добавив косую черту, а затем сочетание строк, счётчиков и функций attr(). Альтернативный текст предназначен для озвучивания программами экранного доступа, но в некоторых браузерах он также может отображаться.

Формальное определение

Формальный синтаксис

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

<content-replacement> = 
  <image>

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

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

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

<image> = 
  <url> |
  <image()> |
  <image-set()> |
  <element()> |
  <paint()> |
  <cross-fade()> |
  <gradient>

<quote> = 
  open-quote |
  close-quote |
  no-open-quote |
  no-close-quote

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

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

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )

<image-set()> = 
  image-set( <image-set-option># )

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

<paint()> = 
  paint( <ident>, <declaration-value>? )

<cross-fade()> = 
  cross-fade( <cf-mixing-image> , <cf-final-image>? )

<gradient> = 
  <linear-gradient()> |
  <repeating-linear-gradient()> |
  <radial-gradient()> |
  <repeating-radial-gradient()> |
  <conic-gradient()> |
  <repeating-conic-gradient()>

<counter-name> = 
  <custom-ident>

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

<image-tags> = 
  ltr |
  rtl

<image-src> = 
  <url> |
  <string>

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type(<string>) ]

<id-selector> = 
  <hash-token>

<cf-mixing-image> = 
  <percentage>? &&
  <image>

<cf-final-image> = 
  <image> |
  <color>

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )

<conic-gradient()> = 
  conic-gradient( [ <conic-gradient-syntax> ] )

<repeating-conic-gradient()> = 
  repeating-conic-gradient( [ <conic-gradient-syntax> ] )

<counter-style-name> = 
  <custom-ident>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<linear-gradient-syntax> = 
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>

<radial-gradient-syntax> = 
  [ [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <color-stop-list>

<conic-gradient-syntax> = 
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<side-or-corner> = 
  [ left | right ] ||
  [ top | bottom ]

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?

<radial-shape> = 
  circle |
  ellipse

<radial-size> = 
  <radial-extent> |
  <length [0,∞]> |
  <length-percentage [0,∞]>{2}

<position> = 
  [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<linear-color-stop> = 
  <color> <color-stop-length>?

<linear-color-hint> = 
  <length-percentage>

<radial-extent> = 
  closest-corner |
  closest-side |
  farthest-corner |
  farthest-side

<length-percentage> = 
  <length> |
  <percentage>

<angular-color-stop> = 
  <color> <color-stop-angle>?

<angular-color-hint> = 
  <angle-percentage> |
  <zero>

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<color-stop-length> = 
  <length-percentage>{1,2}

<color-stop-angle> = 
  [ <angle-percentage> | <zero> ]{1,2}

<angle-percentage> = 
  <angle> |
  <percentage>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Специальные возможности

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

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

• Поддержка специальных возможностей для сгенерированного CSS-содержимого — Tink (2015)
• WCAG, руководство 1.3: Создавайте содержимое, которое можно представить разными способами

• [Понимание критерия успеха 1.3.1

  Руководство W3C по WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)

• Невыполнение критерия успеха 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: blue;
}

q::before,
q::after {
  font-size: larger;
  color: red;
  background: #cccccc;
}

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

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

Результат

Обратите внимание: тип генерируемых кавычек зависит от языка. По умолчанию браузеры добавляют открывающие и закрывающие кавычки перед элементами <q> и после них, поэтому в этом примере кавычки отображались бы и без явного задания. Их можно отключить, задав соответствующим значениям свойства content значения no-open-quote и no-close-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>
  <li>Marsupials</li>
</ol>

CSS

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

Результат

Сгенерированное содержимое маркера каждого элемента списка добавляет префикс "item " с пробелом, отделяющим префикс от счётчика; после счётчика добавляется ": " — двоеточие и ещё один пробел. Функция 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 включает изображение с альтернативным текстом, который программа экранного доступа может озвучить.

HTML

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

CSS

Ниже показан CSS-код для отображения изображения и задания альтернативного текста. Он также задаёт шрифт и цвет содержимого.

a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
}

Результат

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

Включение счётчиков в альтернативный текст

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

HTML

Мы добавляем заголовок, за которым следует упорядоченный список ссылок на названия глав с использованием элементов <ol>, <li> и <a>.

<h2>Chapter list</h2>
<ol>
  <li><a href="#">A stranger calls</a></li>
  <li><a href="#">Two owls</a></li>
  <li><a href="#">Dinner was bland</a></li>
  <li><a href="#">Three owls</a></li>
  <li><a href="#">No-one answered the door</a></li>
  <li><a href="#">The stranger leaves</a></li>
  <li><a href="#">Bedtime</a></li>
</ol>

CSS

В CSS задаётся counter-reset для счётчика chapter на элементе <ol>. Мы также увеличиваем счётчик chapter для каждого элемента <li> с помощью counter-increment и удаляем маркеры списка, задавая для list-style-type значение none.

ol {
  counter-reset: chapter;
}

li {
  counter-increment: chapter;
  list-style-type: none;
}

Затем мы задаём псевдоэлементам ::before элементов <a> сгенерированное значение content, равное эмодзи книги, обозначающему главу, за которым следуют текущее значение счётчика chapter и пробел, отделяющий сгенерированное содержимое от текста ссылки. Наконец, мы задаём альтернативный текст сгенерированного содержимого: текущее значение счётчика chapter с добавленным перед ним словом "Chapter".

a::before {
  content: "📖 " counter(chapter) " " / "Chapter " counter(chapter);
}

Результат

Когда программа экранного доступа переходит к ссылке в списке, поддерживающие эту функцию браузеры произносят слово "Chapter", за которым следует текущее значение счётчика, а затем текст ссылки, например, "Chapter 1 A stranger calls" и "Chapter 2 Two owls".

Замена элемента с помощью URL

В этом примере заменяется обычный элемент! Его содержимое заменяется 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 не создаются.

Замена элемента с помощью <gradient>

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

HTML

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

CSS

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

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

Результат

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

Замена элемента с помощью image-set()

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

HTML

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

CSS

div {
  width: 100px;
  border: 1px solid lightgrey;
}

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

Результат

Спецификации

Совместимость браузеров

См. также

• ::after
• ::before
• ::marker
• ::scroll-button()
• ::scroll-marker
• :target-current
• contain
• quotes
• <gradient>
• image-set()
• <url>
• Заменяемые элементы
• Генерируемое содержимое CSS — модуль
• Списки и счетчики CSS — модуль
• Панели специальных возможностей браузеров: Инспектор специальных возможностей Firefox, панель специальных возможностей Chrome и дерево специальных возможностей Safari