CSS伪元素content设置内容技巧

想要用CSS玩转内容生成？掌握`content`属性是关键！本文详细介绍了CSS伪元素`content`属性的各种用法，它必须与`::before`和`::after`等伪元素配合使用，用于在元素前后插入文本、属性值、特殊符号、图片等内容。通过`attr()`函数，可以动态引用HTML属性值，实现更灵活的内容展示。文章还讲解了如何插入Unicode字符、使用`url()`插入图片，以及在仅需视觉效果时设置`content`为空字符串。无论插入文本、符号还是图片，记住`content`属性是伪元素不可或缺的一部分，即使内容为空也必须定义，快来学习，让你的CSS更强大！

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: "\2022"; —— 插入项目符号 •
• content: "\2713"; —— 插入对勾 ✓
• 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设置内容技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！