css伪元素content属性设置内容方法

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中有 <a href="#" data-tip="点击了解更多">链接</a>，可用CSS插入提示：

a::after {
  content: attr(data-tip);
  font-size: 12px;
  color: #666;
}

插入特殊符号或Unicode字符

使用反斜杠 加Unicode编码插入图标或符号：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

• 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，哪怕为空。

以上就是css伪元素content属性设置内容方法的详细内容，更多请关注php中文网其它相关文章！