content

作者：静子 日期：2016-03-16 点击：1234
CSS3
CSS Reference

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

属性值

none

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

normal

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

<string>

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

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

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

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

<uri>

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

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

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

<counter>

一个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 属性，则返回一个空字符串。

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

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

静子

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

如需转载，烦请注明出处：http://www.w3cplus.com/css3/css-reference/content.html

返回顶部