content_html/css_WEB-ITnose

content属性与::before和::after伪元素配合使用，向网页中某个元素插入生成内容。

content 属性的值就是通过伪元素插入到该元素的内容。

使用 content 属性插入的内容可以是文本字符串、 符号、 图像、 计数器(即样式列表)，或引号。同时，将多个值合并为一个，也是可能的。请参阅以下的值和一些详细的实例。

请注意， content 属性必须包含在 ::before 和 ::after 伪元素的规则之中，否则将不会被生成和插入。总之，你必须总是包含 content 。在许多情况下，如果你只是想要利用伪元素进行实例修饰，不想添加任何内容可以将其设置为空。你可以阅读更多关于 ::before 和 ::after 的不同用例。

笔记

可访问性

使用伪元素插入到页面的内容是插入不到 DOM之中的 — — 它只可以直观地显示。因此，屏幕阅读器不能访问和读取使用伪元素生成的内容。因此，建议您不要使用伪元素向页面中插入重要的内容(比如页脚注释的相关文章)。

伪元素主要是用来插入修饰样式的内容，不应该被用来插入与页面完整性有重要意义的内容。

此外，由于使用伪元素插入的内容不插入到 DOM 中，这意味着你不能使用Javascript添加任何事件处理程序。

官方语法

语法

content: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

• 初始值: normal
• 应用场景: ::before 和 ::after 伪元素
• 动画: 无

属性值

none

不插入任何内容。不生成伪元素。

normal

将 ::before 和 ::after 伪元素设置为 none 。

一个文本字符串。文本字符串被包裹在引号内。请参阅 数据类型可能的属性值列表。

示例:在一个有 new 类的元素(如产品的列表项)之后插入一个“New!”注释.

.new::after {    content: "New!";    color: green;}

你也可以在 content 属性后面，通过编写 \A 转义字符使生成的内容换行。同时要注意这个换行符仍受制于 white-space 属性。

URI是 url() 函数指定的。它指向一个外部资源，如图像。如果资源或图像不能显示，浏览器必须离开，就好像它是未指定或显示一些提示表明该资源不能用。

例如，在页面一个具有名为 signup 类的按钮中添加一个icon图标。

button.signup::before {    content: url(path/to/signup.png);}

一个 CSS Couter 。计数器可以指定两种不同的函数: counter() 或 counters() . 请参阅 counter() 或 counters() 查看更多详细信息。

示例:

li {    content: counter(my-counter-name);}

计数器是一个相当长的话题，不在今天所讲内容范围之内。有关详细信息，请参阅 CSS Couter 。

open-quote | close-quote

这些值已经被 quotes 属性相应的字符串替换。例如:

q, blockquote {  quotes: "“" "”" "‘" "’";}q:before, blockquote:before {    content: open-quote;}q:after, blockquote:after {    content: close-quote;}

更多详细的解释和实例请参阅 quotes 属性。

no-open-quote | no-close-quote

停止显示引用，但仍递增(递减)引用的嵌套级别。请参阅 quotes 。

attr(X)

此函数 (简称 'attribute') 返回元素的 X 属性的字符串。如果元素没有该 X 属性，则返回一个空字符串。

例如， 元素有 href 属性，以确定该链接所指向的位置。 content 属性结合使用 attr() 函数可以获取 href 属性中URL的值，这是十分强大的功能。这可以用于打印样式表时，在该链接的内容之后(使用 ::after 伪元素)将链接指向的 URL 链接打印出来。例如 ︰

@media print {    a[href]::after {        content: attr(href);    }}

上述规则将选择所有链接的 href 属性(使用 属性选择器 )，并使用 attr() 函数检索所有链接属性的值，然后将所有的值设置为 ::after 伪元素的内容，实现链接的内容之后插入链接。

attr() 函数可以检索元素任何属性的值，包括自定义的 HTML5 data-* 属性 。例如:

<!-- HTML --><li data-label="todo">Buy Milk</li>/*CSS*li::before {    content: attr(data-label);    color: grey;}

在 CSS3 中， attr() 表达式获取了一种新的语法。新语法并不稳定，不能在所有的浏览器中获取支持，并且还没有举例用例。该规范还表示，新语法还处于候选推荐阶段被淘汰的风险之中。如果新语法不会被丢弃，将使用新值更新此条目。语法如下所示:

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

表示属性名称， 是一个可选的参数告诉用户代理如何解释这个属性的值，并为 attr() 表达式定义了一个类型。如果省略的话，'string' 就会被隐含。 参数表示一个可用于回退的值，例如用于已命名的属性丢失，或其值不能解析成给定的类型，或使用了无效范围内的属性。如果它不存在，就会应用如下规则: 给定的默认值

unit 参数的值可以是以下之一: string , color , url , integer , number , length , angle (角度), time , or frequency (频率)。

如上文所述，如果新的表达式语法在将来不会被丢弃，此条目将使用详细的说明和示例更新此项。

注意事项

在 content 属性中是可以结合不同内容的。之后这些内容会连接为一个。例如，以下将从上面的例子检索自定义数据属性的值，并在其后面添加一个冒号︰

li::before {    content: attr(data-label) ":";    color: grey;}

下面的示例改善了上面那个检索链接的 href 值，将其打印在打印样式表中的例子。在链接内容后面不添加一些视觉分隔符可能会混淆读者，所以是将要打印的URL值包裹在一对括号之中是很好的选择。这可以通过在 attr() 函数前后结合两个括号字符串来实现，就像这样:

@media print {    a[href]::after {        content: " (" attr(href) ")";    }}

display 属性用于指定插入的内容为inline-level(内联级) 还是 block-level(块级)。默认情况下， ::before 和 ::after 伪元素为内联。

内容和样式的分离

除了可访问性问题，有些人可能会认为，通过CSS添加内容是为了使样式与内容分离，以帮助更好的维护代码。在大多数情况下可能如此，但它仍允许模块化的样式表。例如，上面示例中，通过粘贴代码片段，实现打印样式表上添加链接内容就是网站中一个很好的应用。

另外，比如在页面上所有的链接上插入一个“外部链接”图标，引用外部网页也是十分有用模块化的，并且维护这些样式和内容是相当容易的，所以通过CSS添加内容的概念可能对于一些较真的人难以接受，但它仍然是有用的。它是由CSS作者和开发人员来决定添加什么样的内容，而不会影响其代码的可维护性。

在线实例

下面的在线实例显示了 content 属性与 ::before 和 ::after 伪元素配合使用，插入生成的不同内容。

你可以在 ::before 和 ::after 看到更多的实例展示。

浏览器支持

所有主流浏览器都支持 content 属性:Chrome, Firefox, Safari, Opera, Internet Explorer, Android 和 iOS。

扩展阅读

• 内容生成,自动编号以及列表
• ::after
• ::first-letter
• ::first-line
• ::before

本文根据 @Sara Soueidan 的《 content 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://tympanus.net/codrops/css_reference/content/ 。

静子

在校学生，本科计算机专业。一个积极进取、爱笑的女生，热爱前端，喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博：@静-如秋叶