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编码插入图标或符号：
Revid AI
AI短视频生成平台
96 查看详情 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属性设置内容方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042108.html
微信扫一扫 
支付宝扫一扫 
