伪元素通过css层生成内容，避免冗余html与dom操作，提升性能与可维护性，但需注意可访问性、媒体查询控制、content值管理、定位复用及调试限制等关键实践。
伪元素能避免冗余HTML结构，直接响应屏幕尺寸变化
响应式装饰（比如小屏加“推荐”角标、大屏显示分隔符）如果靠JS动态插入或写死HTML，会增加DOM节点、干扰语义、拖慢首屏。而::before和::after在CSS层就完成内容生成，不污染HTML，且能被媒体查询精准控制显隐。
常见错误是把关键信息塞进content里——比如用::after显示“仅限iOS”，但屏幕阅读器读不到，小屏又没隐藏，造成可访问性断裂。
- 必须配合
@media显式控制content值：小屏设为""，而非只靠display: none - 图标类内容优先用Unicode字符（如
"≡"）或background-image，避免字体加载失败导致空白 - 不要给伪元素绑定
click事件——它不是真实DOM节点，监听无效
content属性是开关，也是性能敏感点
content不是可选配置，而是伪元素的“存在开关”：只要值为none或空字符串""，渲染引擎就跳过该伪元素的布局与绘制。这比display: none更轻量。
但滥用content: url(...)加载图片会触发额外HTTP请求，尤其在移动端弱网下明显拖慢。更糟的是，部分旧版Safari对content中含换行符"\a"支持不稳定，导致分隔线错位。
- 纯装饰图标尽量用
content: "→"或content: ""+background模拟 - 需要动态计数（如
.badge::after { content: attr(data-count); }）时，确保data-count属性始终存在，否则伪元素不渲染 - 避免在
::first-letter等文本伪元素上设置复杂阴影或滤镜，重排重绘开销高
::before和::after能复用同一套定位逻辑适配多断点
伪元素默认继承父元素的position上下文。只要父容器设了position: relative，::before和::after就能用top/right等统一控制位置，不同屏幕尺寸只需调参数，不用重写整套定位规则。
典型翻车场景是：大屏用absolute定位角标，小屏切static后忘记重置top值，导致角标跑出视口。
- 建议把偏移量抽成CSS变量：
--badge-top: 8px;，媒体查询里只改变量值 - 用
transform: translate()替代top/left做微调，减少重排 - 清除浮动这类功能型伪元素（如
.clearfix::after）别加媒体查询——它需始终生效
伪元素无法被JavaScript直接获取，调试要换思路
你写document.querySelector(".btn::after")永远返回null，因为伪元素不在DOM树里。想验证是否生效，只能靠开发者工具的“Computed”面板查content值，或用getComputedStyle(el, "::after").content读取。
更隐蔽的问题是：当父元素font-size在媒体查询中变化，而伪元素content里的文字大小没同步缩放，小屏下可能撑破容器。
- 伪元素内文字尺寸建议用
em或rem，跟随父级缩放 - 涉及
white-space: pre换行的伪元素（如移动端列表分隔符），务必测试Android WebView兼容性 - 动画伪元素（如加载指示器）慎用
animation，某些低端安卓机渲染卡顿
::after { content: "NEW"; }，而是判断这个"NEW"该不该出现在320px宽的屏幕阅读器里，以及它消失时会不会让按钮焦点框错位。伪元素的威力恰恰藏在这些边界条件里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
