CSS content 属性

CSS content 属性用于指定元素的内容，常用于伪元素 ::before 和 ::after 中。它可以插入一段文本、图片等内容，或者指定一个 Unicode 码点。在伪元素中使用 content 属性时，必须声明 “content” 属性，并且必须设置 display 属性，否则不会产生任何效果。

语法

content 属性可以取以下值：

1. normal：默认值，不会插入任何内容。
2. none：不会插入任何内容。
3. 一个字符串值：会将字符串插入到指定元素的内容中。如果字符串中有引号，必须使用双引号将整个字符串括起来。
4. 一个 URI 值：可以插入一张图片。图片将被插入到指定元素的内容中。
5. attr() 函数：可以插入元素的属性值，语法为：“content: attr(属性名)”。属性值会被插入到指定元素的内容中。
6. open-quote 和 close-quote：可以插入引号，用于一些约定俗成的格式，例如 CSS 3 的 text-inset 属性。
7. Unicode 码点：可以插入一个 Unicode 码点，语法为：“content: ‘\XXXX’”。其中 XXXX 为 Unicode 码点的十六进制值。

应用场景

content 属性主要用于伪元素，常见的应用场景包括：

1. 插入图标：通过 content 属性插入一张图片，可以实现许多图标的效果，例如自定义 checkbox、radio、箭头等。
2. 插入文字片段：通过 content 属性插入一段文字，可以实现许多文字片段的效果，例如“new”图标、气泡提示等。
3. 插入 Unicode 码点：例如箭头符号、特殊符号等。通过 content 属性插入 Unicode 码点，可以避免使用图片，从而提高页面的性能。
4. 插入引号：通过 content 属性插入引号，可以实现一些约定俗成的格式，例如“引用”效果。

示例

插入文字片段

假设我们需要为一个标题添加一个“New”图标，可以使用如下代码实现：

h1.new:before {
    content: "New";
    color: #fff;
    background-color: #ffa500;
    padding: 5px;
    margin-right: 10px;
    border-radius: 5px;
}

插入 Unicode 码点

假设我们需要在一个标题中添加一个箭头符号，可以使用如下代码实现：

h1.arrow:before {
    content: "\2192";
}

插入引号

假设我们需要为一个引用添加引号，可以使用如下代码实现：

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

总结

content 属性是 CSS 中一个非常有用的属性，通过它可以实现许多效果，例如插入文字片段、插入图标、插入 Unicode 码点等。在使用 content 属性时，需要注意字符串值要使用双引号将整个字符串括起来，插入图片时需要使用 URI 值，插入属性值时需要使用 attr() 函数，插入 Unicode 码点时需要使用反斜杠将十六进制值转义。