content 属性必须配合伪元素使用，用于插入文本、属性值、符号或图片等内容，如 ::before { content: "文本"; } 或 ::after { content: attr(data-tip); }，支持字符串、attr()、url() 和 unicode，即使为空也需定义。
在CSS中，content 属性主要用于伪元素 ::before 和 ::after 中，用来插入生成的内容。它不能单独使用，必须与伪元素配合，并且通常需要将伪元素的 display 类型设置为合适值（如 inline、block 等）才能正确显示内容。
基本语法
使用伪元素添加内容的基本写法如下：
.element::before {
content: "要插入的内容";
}
.element::after {
content: "结尾内容";
}
插入纯文本内容
可以直接在 content 中使用双引号或单引号包裹字符串：
- content: "Hello";
- content: 'World';
注意：插入的文本是纯静态内容，无法通过CSS再选中或操作。
引用属性值
可以结合HTML的 attr() 函数，动态获取元素的某个属性作为内容：
- content: attr(data-label); —— 插入元素的 data-label 属性值
- content: attr(title); —— 显示 title 属性内容
例如，HTML中有 链接，可用CSS插入提示：
a::after {
content: attr(data-tip);
font-size: 12px;
color: #666;
}
插入特殊符号或Unicode字符
使用反斜杠 加Unicode编码插入图标或符号：
- content: "2"; —— 插入项目符号 •
- content: "3"; —— 插入对勾 ✓
- content: "\"; —— 插入反斜杠本身（需转义）
常用于无图标的简单装饰或标记状态。
插入外部资源（图片）
使用 url() 可以在伪元素中插入图片：
.icon::before {
content: url("icon.png");
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
}
适合小图标或装饰性图像，避免额外DOM元素。
不插入内容但创建元素
有时仅用伪元素做视觉效果（如清除浮动、装饰线条），可设为空字符串：
- content: ""; 或 content: '';
即使没有实际文字，也必须定义 content，否则伪元素不会渲染。
基本上就这些常见用法。掌握 content 的不同类型输入，能更灵活地用CSS生成内容，减少冗余HTML标签。关键是记住：只要有 ::before 或 ::after，就必须写 content，哪怕为空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
