CSS content 属性
CSS content 属性
CSS content 属性用于指定元素的内容,常用于伪元素 ::before 和 ::after 中。它可以插入一段文本、图片等内容,或者指定一个 Unicode 码点。在伪元素中使用 content 属性时,必须声明 “content” 属性,并且必须设置 display 属性,否则不会产生任何效果。
语法
content 属性可以取以下值:
- normal:默认值,不会插入任何内容。
- none:不会插入任何内容。
- 一个字符串值:会将字符串插入到指定元素的内容中。如果字符串中有引号,必须使用双引号将整个字符串括起来。
- 一个 URI 值:可以插入一张图片。图片将被插入到指定元素的内容中。
- attr() 函数:可以插入元素的属性值,语法为:“content: attr(属性名)”。属性值会被插入到指定元素的内容中。
- open-quote 和 close-quote:可以插入引号,用于一些约定俗成的格式,例如 CSS 3 的 text-inset 属性。
- Unicode 码点:可以插入一个 Unicode 码点,语法为:“content: ‘\XXXX’”。其中 XXXX 为 Unicode 码点的十六进制值。
应用场景
content 属性主要用于伪元素,常见的应用场景包括:
- 插入图标:通过 content 属性插入一张图片,可以实现许多图标的效果,例如自定义 checkbox、radio、箭头等。
- 插入文字片段:通过 content 属性插入一段文字,可以实现许多文字片段的效果,例如“new”图标、气泡提示等。
- 插入 Unicode 码点:例如箭头符号、特殊符号等。通过 content 属性插入 Unicode 码点,可以避免使用图片,从而提高页面的性能。
- 插入引号:通过 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 码点时需要使用反斜杠将十六进制值转义。