::before伪元素必须配合content属性使用，否则不渲染；content可为空字符串或Unicode转义字符；需显式设置display以控制布局；其内容不可被屏幕阅读器识别，关键语义应使用真实HTML元素。
伪元素
必须配合
属性使用
没有
，
就不会渲染——这是最常被忽略的前提。
浏览器
会直接忽略该伪元素，哪怕你写了
、
或
也无效。
值可以是空字符串：
，适合纯装饰（如边框、背景色块）
要显示文字或符号，必须显式声明，例如：
或
用 Unicode 图标时注意转义：
（✔），不是
（那是 JS 写法）
不能引用 HTML 实体（如
），只能用 Unicode 转义或字面字符
用
插入图标字体（如 Font Awesome）
当项目已引入图标字体（如
），可通过
+
组合控制图标显示。
确保对应字体已加载且
名称与
中定义完全一致（区分大小写、空格、引号）
Free 版本需指定
（solid 图标），
是 regular（如品牌图标）
避免在
中写成
：虽然部分浏览器兼容，但标准写法是不带
的
布局
常见问题
：默认是 inline，且无法继承父容器的宽高
伪元素默认为
，这会导致它无法设置
/
，也无法用
或
直接控制对齐，容易出现定位错位或尺寸失效。
需要尺寸控制时，必须显式设
：常用
（保留行内流）、
（独占一行）、或
若做
绝对定位
装饰（如角标、底纹），建议父元素加
，再对
设
注意
：伪元素层级默认和宿主元素相同，但无法高于其父级的其他子元素，除非父级有
且设了
性能与可访问性提醒：伪元素内容不可被屏幕阅读器读取
和
生成的内容属于「纯表现层」，主流屏幕阅读器（NVDA、VoiceOver）默认跳过。如果图标承载关键语义（如「必填项」星号、「错误提示」叉号），不能只靠伪元素实现。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
装饰性图标（如分隔线、小圆点）用
完全合适
功能性图标应使用真实 HTML 元素（如
）并辅以
或
避免用
替代按钮文字或链接锚文本——那会让键盘用户和读屏用户完全丢失操作目标
真正难的不是怎么画出一个三角形或添加一个箭头，而是判断这个“画”是不是应该由 CSS 来承担。一旦涉及语义、交互或状态反馈，伪元素就该让位给真实 DOM 节点。
::beforecontentcontent::beforecolorbackgrounddisplaycontentcontent: ""content: "→"content: "★"content: "\2714""\u2714"×::beforefont-family: "Font Awesome 6 Free"contentfont-familybutton::before {
content: "\f00c"; /* Font Awesome 的 check 图标 Unicode */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}font-family@font-facefont-weight: 900400content"\uf00c"u"\f00c"::beforedisplay: inlinewidthheightflexgriddisplayinline-blockblockflexposition: relative::beforeposition: absolutez-indexpositionz-index::before::after::beforearia-labelaria-describedby::before