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