::after画徽章更合适因不增HTTP请求且不污染DOM，适用于纯色、无镂空、非动态缩放的角标；需三行基础CSS：content显式声明、父元素position: relative、::after设position: absolute并写死宽高。
为什么::after画徽章比直接用SVG或图片更合适
它不增加HTTP请求，也不污染DOM结构；只要控制好content、position和尺寸，就能在任意元素上“贴”一个轻量级装饰层。但前提是：这个徽章得是纯色、无镂空、不依赖动态缩放——比如「NEW」「HOT」「VIP」这类带底色+文字的角标，或者菱形、三角形、圆点类几何标识。
真正不适合用::after做徽章的场景有三个：clip-path坐标需JS计算、要响应容器宽高变化、含透明镂空或曲线轮廓。这些情况建议直接上background-image或内联SVG。
必须写的三行基础CSS才能让::after徽章显示出来
很多徽章写完没反应，不是逻辑错，是漏了最底层的渲染前提：
-
content必须显式声明，哪怕只是content: ""
- 父元素得有
position: relative（否则absolute定位会脱出上下文）
-
::after本身得设position: absolute，且宽高不能靠内容撑开——得写死或用100%配合父容器约束
content必须显式声明，哪怕只是content: ""
position: relative（否则absolute定位会脱出上下文）::after本身得设position: absolute，且宽高不能靠内容撑开——得写死或用100%配合父容器约束漏掉任意一条，徽章就“隐身”。调试时先加border: 1px solid red确认伪元素是否渲染、位置是否对，再删掉。
用border+transform画三角形/菱形徽章的参数陷阱
三角形徽章本质是把四边框其中三边设为透明，剩下一侧有色边形成斜边闭合——但border-width值决定尖角大小，transform: rotate()角度稍偏就会错位。
常见翻车点：
- 想画向右箭头三角，却写了
border-left: 10px solid #f00——结果三角朝左，应改用border-top/border-right组合 - 菱形徽章用
transform: rotate(45deg)后，发现边缘被父容器overflow: hidden裁掉——得给父元素加padding或用clip-path: polygon()兜底 - 小尺寸徽章（如8px×8px）下
border锯齿明显，此时改用background-color+width/height更清晰
示例：右上角红色「NEW」菱形徽章
立即学习“前端免费学习笔记（深入）”；
.badge-new {
position: relative;
}
.badge-new::after {
content: "NEW";
position: absolute;
top: -6px;
right: -6px;
background: #e74c3c;
color: white;
font-size: 10px;
width: 48px;
height: 20px;
line-height: 20px;
text-align: center;
transform: rotate(45deg);
transform-origin: center;
}
字体图标徽章的兼容性雷区
用Font Awesome或系统图标字体（如"Segoe UI Symbol"）插入徽章，看似省事，实则容易在iOS Safari或旧版Android WebView中丢字。
关键控制点：
-
font-family必须完整写对，比如font-family: "Font Awesome 5 Free", sans-serif，且font-weight要匹配（Free版是900，Brands版是400） - Unicode字符得用
\fxxx格式，不能复制粘贴图标本身（编码可能错乱） - 没加载完字体时图标会闪动或留白，建议加
font-display: optional或用data-icon属性降级为文字
真正稳定的做法：小徽章优先用纯CSS绘制（border/clip-path），大图标或复杂符号才引入字体——别让一个角标拖垮整页首屏渲染。
复杂点在于，所有几何变形都依赖父容器的定位上下文和尺寸约束；一旦嵌套过深或用了transform: scale()，::after的top/right值就容易失准。这时候宁可多一层span，也别硬扛伪元素嵌套定位。
