内容

content CSS 属性使用生成的 value 替换内容。它可用于定义元素或伪元素内部呈现的内容。对于元素，content 属性指定元素是否正常呈现（normal 或 none）或被图像（及其关联的“alt”文本）替换。对于伪元素和边距框，content 将内容定义为图像、文本、两者或无，这决定元素是否呈现。

使用 content 属性插入的对象是匿名替换元素。

语法

css

/* 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";

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

Values

The value can be

两个关键字之一 — none 或 normal
<content-replacement> 用于替换 DOM 节点。<content-replacement> 始终是 <image>。
当替换伪元素和边距框时，<content-list>。内容列表是一个匿名内联框列表，按指定顺序出现。每个 <content-list> 项目要么是 contents，要么是 <string>、<image>、<counter>、<quote>、<target> 或 <leader()> 类型。
<string> 或 <counter> 的可选替代文本值，前面有一个斜杠 (/)。

上面提到的关键字和数据类型在下面更详细地描述

none

当应用于伪元素时，不会生成伪元素。当应用于元素时，该值没有效果。

normal

默认值。对于 ::before 和 ::after 伪元素，计算为 none。对于其他伪元素，内容将是该 ::marker、::placeholder 或 ::file-selector-button 预期的初始（或正常）内容。对于常规元素或页面边距框，这将计算为 contents。

contents

将元素本身的内容添加到生成的 content value 中。

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

attr(x) CSS 函数检索选定元素的属性值，或伪元素的来源元素。元素属性 x 的值是一个未解析的字符串，表示属性名称。如果没有属性 x，则返回空字符串。属性名称参数的区分大小写取决于文档语言。

替代文本： / <string> | <counter>

可以通过添加一个正斜杠，然后是一个文本字符串或一个计数器，为图像或任何 <content-list> 项指定替代文本。替代文本旨在用于屏幕阅读器进行语音输出，但也可能在某些浏览器中显示。请注意，如果浏览器不支持替代文本，则 content 声明将被视为无效，并将被忽略。/ <string> 或 / <counter> 数据类型指定元素的“alt 文本”。

正式定义

初始值	`normal`
应用于	所有元素、树状伪元素和页面页边距框
继承	否
计算值	在元素上，始终计算为 `normal`。在 `::before` 和 `::after` 上，如果指定 `normal`，则计算为 `none`。否则，对于 URI 值，则为绝对 URI；对于 `attr()` 值，则为结果字符串；对于其他关键字，则如指定。
动画类型	离散

正式语法

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> = 
  string            |
  ident             |
  color             |
  number            |
  percentage        |
  length            |
  angle             |
  time              |
  frequency         |
  flex              |
  <dimension-unit>  

<id-selector> = 
  <hash-token>  

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

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

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

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

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

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

无障碍性

CSS 生成的内容不包含在 DOM 中。因此，它不会在辅助功能树中表示，并且某些辅助技术/浏览器组合不会宣布它。如果内容传达了理解页面目的的关键信息，最好将其包含在主文档中。

如果插入的内容不是装饰性的，请检查是否将信息提供给辅助技术，并且在禁用 CSS 时也可用。

示例

前五个示例在伪元素上创建生成的內容。最后三个是元素替换的示例。

根据元素的类追加字符串

此示例在具有特定类名称的元素的文本之后插入生成的文本。文本颜色为红色。

HTML

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

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

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

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 和 no-close-quote 来关闭它们，或者将它们都设置为 none 来关闭它们。也可以通过将 quotes 属性设置为 none 来关闭它们。

向列表项计数器添加文本

此示例将一个计数器夹在两个 <string> 之间，并在所有列表项前面添加，为无序列表 (<ol>) 中的列表项 (<li>) 创建更详细的标记。

HTML

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

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

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

css

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

结果

生成的内容是 href 属性的值，前面是“URL: ”，带有一个空格，全部括在括号中。

添加带有替代文本的图像

此示例在所有链接之前插入一个图像。提供了两个 content 值。后面的 content 值包含一个带有替代文本的图像，屏幕阅读器可以将其作为语音输出。如果浏览器不支持替代文本，则此声明将被视为无效，并将显示之前的 content 值。此回退内容列表包括一个图像和消息“ - alt 文本不受支持 - ”。

HTML

html

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

CSS

显示图像并设置替代文本的 CSS 如下所示。这也设置了内容的字体和颜色。这将用于显示替代文本的浏览器，以及不支持替代文本并显示回退 content 值的浏览器。

css

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”。如果支持（如果“alt 文本不受支持”没有显示），则可以使用开发者工具的选择工具选择 ::before 伪元素，并在辅助功能面板中查看辅助功能名称。

在不支持替代文本语法的浏览器中，包含 alt 文本的整个声明无效。在这种情况下，将使用之前的 content 值，显示图像和“alt 文本不受支持”文本。

使用 `url()` 进行元素替换

此示例替换常规元素！元素的内容将使用 url() 图像函数替换为 SVG。

伪元素不会在替换元素上呈现。由于此元素被替换，任何匹配的 ::after 或 ::before 不会生成或应用。为了演示这一点，我们包含一个 ::after 声明块，试图添加 id 作为生成的内容。此伪元素将不会生成，因为元素被替换。

HTML

html

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

CSS

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() 替换。使用 @supports，我们为支持 alt 文本的元素内容替换的浏览器提供 alt 文本支持和 repeating-linear-gradient()。

HTML

html

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

CSS

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 值，也并非所有浏览器都支持替换上的 alt 文本。如果浏览器显示一个没有渐变的框，则支持替换元素，但不支持渐变作为内容替换值。如果元素被替换为条纹渐变，则浏览器同时支持两者。

使用 `image-set()` 进行元素替换

此示例用 image-set() 替换元素的内容。如果用户显示具有正常分辨率，则将显示 1x.png；分辨率更高的屏幕将显示 2x.png 图像。

HTML

html

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

CSS

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

css

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

结果

规范

规范
CSS 生成内容模块级别 3 # content-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

::after
::before
::marker
contain
quotes
<gradient>
image-set()
url()
替换元素
CSS 生成的内容模块
CSS 列表和计数器模块
浏览器辅助功能面板：Firefox 辅助功能检查器、Chrome 辅助功能面板和 Safari 辅助功能树