用 ::after 更轻量且语义干净，但仅限纯装饰角标；需交互或可访问性时必须用 span；定位前须包裹 img 的父容器设 position: relative；::after 必须设 content: ""；推荐用 transform 锚定再微调；深色模式用 prefers-color-scheme 媒体查询配合 CSS 变量；Safari 飘移应设 font-size: 0 或 display: block 消除行内干扰。
图片右上角角标用 ::after 还是单独加 span？
用伪元素 ::after 更轻量、语义更干净，前提是角标纯装饰（如“NEW”“Hot”），不承载交互或可访问性需求。如果角标要支持点击、焦点导航、屏幕阅读器朗读，必须用真实元素（比如 span 包裹文字并加 aria-label）。
常见错误是给 img 直接设 position: relative 后挂 ::after，但忘了 img 是替换元素，默认 display: inline，导致定位基准错乱：
-
img外层必须套一层div或figure并设position: relative - 避免对
img自身设position: relative—— 部分浏览器下会破坏垂直对齐或触发意外布局 - 伪元素默认不渲染，必须有
content: ""（哪怕为空）
top 和 right 设多少才不贴边又不溢出？
硬写 px 值（比如 top: 5px; right: 5px）在响应式场景下极易错位。更稳妥的做法是结合 transform 微调，让偏移与角标尺寸解耦：
- 设
top: 0; right: 0;把角标锚定到右上角顶点 - 用
transform: translate(50%, -50%)将角标中心对齐顶点（适用于圆形/方形角标） - 若角标是带文字的矩形，改用
transform: translateX(50%) translateY(-100%)，让顶部边缘对齐 - 注意：父容器不能有
overflow: hidden，否则transform移出的部分会被裁掉
角标背景色和文字怎么适配深色模式？
直接写死 background-color: #f00 在深色背景下会糊成一片。优先用 CSS 自定义属性 + @media (prefers-color-scheme) 控制：
立即学习“前端免费学习笔记（深入）”；
img-wrapper {
--badge-bg: #ff4757;
--badge-text: #fff;
}
@media (prefers-color-scheme: dark) {
img-wrapper {
--badge-bg: #ff6b6b;
--badge-text: #000;
}
}
img-wrapper::after {
background-color: var(--badge-bg);
color: var(--badge-text);
}
别依赖 color-scheme: light dark —— 它只影响表单控件，对自定义角标无效。也别用 JS 检测深色模式再切 class，CSS 原生媒体查询更可靠、无闪屏。
为什么角标在 Safari 里位置飘移？
Safari 对 img 的 vertical-align 处理更敏感，默认 baseline 会让父容器行高影响定位。根本解法不是调 top，而是切断行内布局干扰：
- 父容器设
font-size: 0消除行内间隙 - 或把
img设为display: block - 伪元素加
box-sizing: border-box，避免padding/border改变实际尺寸 - 慎用
line-height在父级——它会间接撑开定位参考框
真正麻烦的是混合了 object-fit 和 transform 的场景：Safari 可能先缩放再定位，导致偏移量计算失准。这时候宁可放弃 transform，改用精确的 calc() 配合 width/height 固定值。
