移动端伪元素图标需用url()引用svg并设宽高、viewbox；content不支持html/js或动态映射；ios safari中伪元素无点击响应且不可读屏，应改用真实元素承载。
移动端图标的伪元素替换不能靠 content 直接塞 HTML 或 JS，也不能用本地相对路径引用图片——多数构建工具会漏掉 CSS 里的 url() 路径，导致图标不显示。
content 插入 SVG 图标时为什么常被裁切或模糊？
因为 content: url(...) 把 SVG 当作内联内容渲染，尺寸由伪元素的 font-size 和默认行高隐式控制，不是背景图，没法用 background-size 缩放。SVG 自身若没写 viewBox，硬编码了 width/height，缩放就会失真。
- 必须显式设置伪元素宽高：
width: 1.2em; height: 1.2em; - 搭配
vertical-align: middle对齐文本基线 - SVG 源文件务必带
viewBox="0 0 24 24"，删掉所有width/height属性 - 路径要基于 CSS 文件位置写，Vite 中常用
url(/src/assets/icon-menu.svg)，Webpack 可能需配~assets/icon-menu.svg
用 attr(data-icon) 动态换图标但只输出字符串？
content: attr(data-icon) 不做任何映射或转义，<i data-icon="home"></i> 最终只会显示文字 “home”，不是图标。这不是 bug，是设计如此。
- 想实现多图标复用，得配合 CSS 类名匹配：
.icon-home::after { content: url(./home.svg); } - 或改用图标字体：
.icon::after { content: ""; font-family: "icon-font"; } - 若坚持用 data 属性，只能走 JS 注入 class，再由 CSS 响应 ——
content本身不支持条件分支
伪元素图标在 iOS Safari 上点击无响应？
因为 ::before/::after 默认 pointer-events: none，且不在 DOM 中，无法绑定事件。用户点的是父元素，不是伪元素本身。
- 加
pointer-events: auto仅对部分浏览器生效（Chrome OK，iOS Safari 仍忽略） - 真正可靠的做法：把图标逻辑移到真实元素上，比如用
<span class="icon menu"></span>，再用.menu::after渲染，点击监听整个span - 若必须用伪元素承载交互，得在外层包一层可点击容器，并用
padding-left+background-image替代content: url()，这样更可控
最易被忽略的一点：伪元素图标无法被屏幕阅读器识别，aria-label 无法作用于 ::after。需要图标语义时，必须用真实元素或至少加 aria-hidden="true" 配合旁白文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
