本文共 772 字，大约阅读时间需要 2 分钟。

CSS content 属性

定义和用法

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

说明

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

可能的值

实例

下面的例子在每个链接后插入括号中的 URL：

W3School contains free tutorials and references.
注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。

结果如下：

CSS :before 伪元素

定义和用法

:before 伪元素在元素之前添加内容。

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

实例

此样式会在每个 h1 元素之前播放一段声音：

This is a heading
The :before pseudo-element inserts content before an element.
This is a heading
注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。

CSS :after 伪元素

定义和用法

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

转自w3chool