打印模式下::after图标消失的直接原因是浏览器打印时忽略content值，尤其attr()、Unicode字体图标等；应改用background-image或print媒体查询中设纯文本fallback并提示用户启用“背景图形”。
打印模式下 ::after 伪元素图标消失的直接原因
绝大多数情况是浏览器在打印预览或实际打印时，content 值被忽略或强制设为 none，尤其当内容来自 attr()、Unicode 字符或空字符串时——不是 CSS 写错了，是打印媒体查询默认行为压制了伪元素渲染。
哪些 content 值在 print 中会被静默丢弃
Chrome、Firefox 和 Safari 的打印引擎对伪元素内容有不同但趋同的保守策略：
-
content: attr(data-icon)：几乎总是失效，因为打印模式下不解析自定义属性值 -
content: "\e901"（字体图标 Unicode）：部分字体未嵌入 PDF 或未启用“背景图形”选项时丢失 -
content: ""：生成空盒，但若没配background-image或border，打印时尺寸坍缩为 0×0 -
content: "→"（原始字符）：编码不一致或字体回退失败时显示为空白或方块
如何让 ::after 图标在 print 中稳定出现
核心思路：避开依赖 content 文本渲染，改用可打印的视觉载体。
- 用
background-image替代字体图标：content: ""+background: url("arrow.svg") no-repeat;，SVG 在打印中支持良好 - 显式声明
@media print并重置关键样式：@media print { .btn::after { content: "→"; /* 纯文本 fallback */ font-family: "DejaVu Sans", sans-serif; /* 打印友好字体 */ display: inline-block; } } - 避免依赖
attr()：打印时它基本不可靠，改用 class 控制，如.btn--save::after直接写死内容 - 强制启用背景打印：用户需在浏览器打印设置中勾选「背景图形」（Chrome/Firefox 默认关闭），无法通过 CSS 控制，但可在文档中提示
容易被忽略的兼容性细节
即使加了 @media print，仍有两个隐性陷阱：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block在某些旧版打印引擎中会塌陷，建议补vertical-align: middle或改用display: block+width: 1em - 父元素若设了
overflow: hidden，打印时仍会裁剪伪元素——哪怕它用position: absolute偏移，这点和屏幕渲染一致，但更难察觉
真正卡住时，别调 z-index 或 opacity，先打开打印预览 → 右键检查 → 看 computed 样式里 content 的最终值是不是 none，再确认 background-image 是否加载成功。打印模式下，伪元素的“存在感”比屏幕上脆弱得多。
