伪元素图标必须用 content 属性插入字符串、Unicode 或转义字符，不支持 SVG 标签；需手动控制对齐、颜色、大小，并注意无障碍和兼容性问题。
直接用 before: 或 after: 前缀 + content-[''] 就能加装饰图标，但内容必须是字符串、转义字符或 Unicode，不能直接塞 SVG 标签。
伪元素图标必须用 content 生成文本或符号
Tailwind 的 ::before 和 ::after 本质是 CSS 伪元素，依赖 content 属性插入内容。这意味着：
-
before:content-['?']可行 —— Unicode 符号直接渲染 -
before:content-['<svg>...</svg>']不可行 —— 浏览器会原样显示字符串，不解析 HTML -
before:content-['"']要注意引号嵌套，单引号内用双引号需转义为before:content-['\"'] - 中文、Emoji、数学符号（如
✓、→）都可直接写进content-['']，无需额外编码
图标对齐和间距要手动调，不能靠 flex 或 text-align
伪元素默认是 inline-level，不参与父容器的 flex 布局，也不响应 text-center。常见错觉是“图标没居中”，其实是定位方式不对：
- 用
before:mr-2或after:ml-2控制与相邻文本的间距 - 需要垂直居中时，加
before:align-middle（前提是父元素行高合理） - 若图标和文字高度不一致，
before:mt-0.5类微调比改line-height更安全 - 绝对定位更可控：
relative before:absolute before:top-1/2 before:-translate-y-1/2 before:left-0，但得确保父元素有relative
颜色、大小、字体需显式设置，不继承父级
伪元素不会自动继承父元素的 color 或 font-size，尤其在按钮、链接等语义化标签里容易漏设：
立即学习“前端免费学习笔记（深入）”；
-
before:content-['★'] before:text-yellow-400 before:text-sm—— 必须同时指定颜色和字号 -
before:content-['*'] before:text-red-500 before:ml-1比只写before:text-red-500更稳妥 - 用
before:font-mono或before:font-sans控制图标字体，避免系统 Emoji 渲染不一致 - 深色模式下记得加
dark:before:text-gray-300，否则图标可能在暗背景下消失
复杂图标建议改用内联 SVG，别硬塞进 content
当需要多色、路径精细、响应式缩放或动态变色时，content-[''] 就力不从心了：
- Emoji 在 Windows 和旧版 Safari 上渲染差异大，比如
??可能断开或变方块 - 无法实现 hover 时图标颜色渐变，因为
hover:before:text-blue-500只作用于整个伪元素，不是子路径 - 真正要复用图标库（如 Heroicons），应改用内联
<svg></svg>并配合text-current，让fill="currentColor"生效 - 如果非得用伪元素加载 SVG，只能走
mask-image+ base64 data URL 路线，但要精简 SVG、URL 编码#、补全-webkit-mask-image，兼容成本高
最常被忽略的一点：伪元素图标一旦加了 content，就变成可选中文本 —— 屏幕阅读器可能朗读出来。若纯装饰，务必加 aria-hidden="true" 到宿主元素，否则影响无障碍体验。
