伪元素必须设置合法content值（如""、字符串、attr()等）才能渲染，否则display、background等所有样式及媒体查询调整均无效；content: none或缺失会导致伪元素完全不生成。
content 属性必须存在且值合理，否则响应式调整无效
伪元素不渲染，所有后续样式（包括媒体查询里的调整）都白搭。常见错误是写了 display: block 或 background 却漏掉 content，或者写成 content: none（非法值）。
响应式场景下尤其要注意：空内容用 content: ""，文字或图标必须显式声明；Unicode 要用 \2714 格式，不是 \u2714 或 HTML 实体 ×。
- 移动端隐藏装饰时，优先用
display: none，而不是删掉content—— 后者会让整个伪元素被浏览器忽略，媒体查询里再设content也无效 - 用
attr()动态注入内容（如content: attr(data-label)）时，确保对应 HTML 属性在不同断点下始终存在，否则小屏可能显示空白
尺寸和定位要用相对单位，避免 px 硬编码
固定像素值（如 width: 16px）在高 DPI 屏或缩放字体时会失真。伪元素默认是 inline，width/height 对它无效，必须先设 display 才能生效。
推荐组合：
-
display: inline-block+width: 1.2em：随父元素字体缩放 -
display: block+width: 5%：按容器宽度比例缩放 - 全屏装饰用
vw，比如left: 2vw，但注意小屏上vw值太小可能导致元素不可见
媒体查询中修改伪元素需保持结构一致
不能只在 @media 里改 content 或 display，而忽略配套样式。例如在大屏显示图标、小屏换成文字，两个版本的 font-size、margin、position 都得单独定义，否则容易错位或重叠。
典型陷阱：
- 大屏用
position: absolute定位，小屏切display: inline时没重置top/left，导致文字跑出可视区 - 用
transform: scale(0.8)缩小图标，但没配transform-origin，缩放中心偏移 - 小屏隐藏后，忘了移除
z-index或will-change，残留渲染开销
可访问性限制在响应式中更隐蔽
伪元素内容不会被屏幕阅读器读取，这点在桌面端已知，但响应式切换时更容易被忽略：比如大屏用 ::before 显示「新」角标，小屏改用文字“NEW”放在 HTML 里——若只改了视觉样式而没同步更新真实 DOM，视障用户在小屏下就完全感知不到这个状态。
关键判断点：
- 该内容是否承载操作含义（如必填、错误、激活）？→ 必须用真实元素 +
aria-live或aria-hidden="true"显式标注 - 只是视觉分隔或装饰（如列表项前的圆点、标题下的短横线）？→ 用伪元素安全，但加
aria-hidden="true"明确排除 - 用
url()插入 SVG 图标时，SVG 文件本身若含文字或语义结构，伪元素仍无法透出这些信息
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
