必须给勋章容器设 position: relative，否则 ::before/::after 伪元素会相对于最近定位祖先而非勋章本身定位；常用 ::after 实现角标，需配合 absolute 定位、z-index 层叠控制、svg 背景或 unicode 字符，并注意高 dpr 屏幕适配与跨浏览器一致性。
怎么用 ::before 或 ::after 给勋章图标加角标
直接加就行，但得确保父容器是定位上下文（position: relative），否则 伪元素 会相对于最近的定位祖先偏移，而不是勋章本身。常见错误是忘了设 position，结果角标飘到页面左上角去了。
典型场景：用户头像旁的「VIP」徽章、商品卡片上的「NEW」角标、活动页勋章右上角的「?」。
- 必须给勋章容器加
position: relative，不然absolute伪元素会脱标 -
::after比::before更常用——语义上角标是“附加信息”，不是内容本体 - 用
content: "?"或content: ""配合背景图更可控；纯文字角标注意字体大小和行高对齐 - 移动端要加
transform: scale(0.8)防止角标过大，尤其在 iPhone 小屏上
为什么 z-index 在伪元素上经常失效
不是伪元素不支持 z-index，而是它默认没有层叠上下文——只有定位元素（position 不为 static）且设置了 z-index 才能参与层叠比较。如果勋章本身没定位，伪元素即使设了 z-index 也无效。
- 父容器没设
position，伪元素的z-index直接被忽略 - 父容器设了
z-index: 1，但伪元素设z-index: 99——没用，因为伪元素不能突破父级的层叠上下文边界 - 正确做法：父容器
position: relative; z-index: 1，伪元素position: absolute; z-index: 2 - 如果勋章用了
transform（比如 hover 缩放），也会隐式创建层叠上下文，此时伪元素的z-index只在该上下文中生效
用 background-image 还是 Unicode 字符做角标更稳妥
Unicode 字符（如 "★"、"NEW"）写法快、兼容性好，但字体渲染不可控；background-image 精确、可缩放，但多一次 HTTP 请求或需 base64 内联。
立即学习 “ 前端免费学习笔记（深入）”；
- 小项目 / 内部系统：直接用
content: "?"，配合font-family: system-ui避免 fallback 字体错位 - 对外产品 / 多语言环境：优先用
background-image: url(data:image/svg+xml,……)，SVG 内联无请求、缩放不失真 - 别用
emoji当角标——iOS 和 Android 渲染差异大，同一字符宽度可能差 2px，导致位置偏移 - 如果用 SVG，记得加
background-size: contain和background-repeat: no-repeat
伪元素角标在高 DPR 屏幕上模糊怎么办
本质是位图缩放问题。用 PNG/JPG 当背景图时，1x 图在 2x 屏上会被拉伸，边缘发虚。SVG 天然矢量，但若用 CSS 的 width/height 强制缩放，也可能失真。
- 绝对避免用 PNG 做角标背景——除非你同时提供
@2x版本并用image-set()切换 - SVG 内联时，不要设固定
width/height，改用background-size: 1em 1em或具体px值（如12px 12px） - 用
transform: scale(0.5)缩放伪元素本身比缩放背景图更可靠，尤其配合transform-origin: top right对齐右上角 - 测试时务必在真机 Safari（iOS）下看——它的伪元素渲染和 Chrome 有细微差别，特别是
border-radius和box-shadow叠加时
事情说清了就结束。真正难的不是加角标，而是让角标在所有屏幕、所有浏览器、所有缩放比例下都严丝合缝地钉在勋章右上角——那几像素的偏差，往往来自一个没写的 position，或一次没算准的 transform-origin。
