最简徽章用 span + css 实现：语义正确、兼容所有浏览器；关键为 display: inline-flex、padding、border-radius、背景色、font-size: 0.75em、line-height: 1，并用 data-status 驱动样式，伪元素实现角标，clamp() 控制响应式字号。
用 span + CSS 实现最简徽章（兼容所有浏览器）
徽章不是组件库专属，原生 HTML 完全能搞定，关键在语义和样式分离。span 是最稳妥的容器选择——它不带默认样式、不影响布局流，且比 div 更符合“行内标注”的语义。
常见错误是直接套用 div 或滥用 label，导致响应式错位或屏幕阅读器误读。实际只需两步：
- 用
<span class="badge">NEW</span>包裹文字 - 给
.badge加display: inline-flex（或inline-block）、padding、border-radius和背景色 - 加
font-size: 0.75em和line-height: 1避免垂直偏移
徽章颜色要动态？别硬写 class，用 data-status 控制
写一堆 badge-success、badge-error 很难维护，尤其状态来自后端 API 时。用属性驱动更灵活，CSS 里直接匹配 [data-status="success"] 即可。
比如后端返回 {"status": "pending"}，前端渲染成 <span class="badge" data-status="pending">Pending</span>，CSS 写：
立即学习“前端免费学习笔记（深入）”；
.badge[data-status="pending"] { background: #faad14; color: #fff; }
.badge[data-status="success"] { background: #52c418; color: #fff; }
.badge[data-status="error"] { background: #f5222d; color: #fff; }
这样增删状态不用改 HTML 结构，也不用 JS 拼接 class 字符串，避免遗漏或拼写错误。
徽章数字右上角角标？小心 position: absolute 的定位陷阱
很多教程教用 position: absolute 叠加小红点，但容易脱离文档流、遮挡文字，或在父容器 overflow: hidden 时被裁掉。
更稳的方案是用伪元素 + relative 定位：
- 给徽章容器设
position: relative - 用
::after生成角标，content: "9+"，再配position: absolute; top: -6px; right: -6px; - 务必加
transform: translate(50%, -50%)精准对齐，否则不同字号下偏移量会漂移 - 如果数字可能为 0，记得加
[data-count="0"]::after { display: none; }
徽章要响应式缩放？别用媒体查询硬切，试试 clamp()
移动端徽章文字太小看不清，PC 端又嫌太大，传统做法是写一堆 @media，但其实一行 font-size: clamp(0.6rem, 0.8vw, 0.875rem); 就能解决。
clamp() 三个参数分别是：最小值、首选值（随视口缩放）、最大值。它比 vw 单独用更可控，不会在超大屏上无限放大。
注意：IE 不支持 clamp()，如需兼容，得回退到媒体查询，但绝大多数场景已可放心用。
真正麻烦的是徽章和主文字的基线对齐——哪怕用了 vertical-align: middle，不同字体下仍可能浮动。最省事的办法是统一用 display: inline-flex + align-items: center，把文字和徽章都当 flex 项目处理。
