CSS 的 content 属性用于在元素的::before 和::after 伪元素中插入生成的内容。它本身并不直接作用于元素本身，而是作用于这些伪元素，允许你在元素内容的前面或后面添加内容，而无需修改 HTML 结构。
content 属性的主要作用是插入各种类型的内容，包括：
- 字符串: 可以使用单引号或双引号插入文本字符串。例如：
content: "Hello, world!"; - 图像: 使用
url()函数插入图像。例如：content: url("image.png"); - 计数器: 使用
counter()或counters()函数插入计数器的值。这对于创建自动编号列表或章节非常有用。 - 属性值: 使用
attr()函数插入元素的属性值。这可以用于显示元素的 title 属性或其他自定义属性。 - 引号: 使用
open-quote和close-quote插入引号，并根据语言环境自动调整引号样式。 - 无内容: 使用
no-content或normal表示不插入任何内容。normal是默认值。
content 属性的应用场景非常广泛，一些常见的例子包括：
- 清除浮动: 结合
::after伪元素和clear: both;可以清除浮动元素带来的布局问题。 - 插入图标: 可以使用
content属性和字体图标库（如 Font Awesome）来插入图标，而无需使用额外的 HTML 元素。 - 创建复杂的 CSS 形状: 结合
::before和::after伪元素，以及其他 CSS 属性，可以创建各种复杂的几何形状，例如三角形、箭头等。 - 生成自动编号列表: 使用计数器可以轻松创建有序列表，而无需手动添加数字。
- 显示提示信息: 可以使用
attr()函数显示元素的 title 属性作为提示信息，或者使用自定义属性存储更丰富的信息。 - 自定义样式的引号: 使用
open-quote和close-quote可以根据语言环境自动调整引号样式，避免手动添加不同类型的引号。 - 插入特殊字符: 使用Unicode字符的转义序列，例如
content: '\2713';可以插入一个勾号 (✓)。 可以使用类似content: '\00A9';插入版权符号 (©)。
示例：
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 插入图标 */
.icon::before {
content: "\f00c"; /* 假设这是 Font Awesome 中的图标 */
font-family: "Font Awesome 5 Free";
}
/* 创建三角形 */
.triangle::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
}
总而言之，content 属性是一个非常强大的 CSS 属性，可以用于创建各种动态和视觉效果，而无需修改 HTML 结构，从而提高代码的可维护性和灵活性。 理解并熟练运用 content 属性对于前端开发者来说至关重要。