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
不插入任何内容。不生成伪元素。
将 ::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 。
这些值已经被 quotes 属性相应的字符串替换。例如:
q, blockquote { quotes: "“" "”" "‘" "’";}q:before, blockquote:before { content: open-quote;}q:after, blockquote:after { content: close-quote;}更多详细的解释和实例请参阅 quotes 属性。
停止显示引用，但仍递增(递减)引用的嵌套级别。请参阅 quotes 。
此函数 (简称 'attribute') 返回元素的 X 属性的字符串。如果元素没有该 X 属性，则返回一个空字符串。
@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> ]? )
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。
本文根据 @Sara Soueidan 的《 content 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://tympanus.net/codrops/css_reference/content/ 。
在校学生，本科计算机专业。一个积极进取、爱笑的女生，热爱前端，喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博：@静-如秋叶
