必须给父元素设 position: relative，否则 ::after 绝对定位会相对于 body 定位导致错乱；常见错误包括角标飘移、缩放偏移、响应式消失；需确保 content 存在且合理使用 top/right 等定位属性。
必须给父元素设 position: relative
伪元素 ::after 的绝对定位是相对于最近的「已定位祖先元素」，不是父元素本身。如果忘了这一步，角标会飘到 body 左上角或完全不可见——这是最常踩的坑。
常见错误现象：::after 角标位置错乱、在缩放后偏移、响应式下突然消失。
- 父容器（比如
<i class="icon-message"></i>）必须显式声明position: relative - 若父元素本身是
display: inline（如<i></i>或<span></span>），建议加vertical-align: middle防止基线对齐导致上下错位 - 不要依赖
transform: translate()微调位置——它触发重排，高 DPI 下易糊；优先用top/right配合固定像素值
content 属性不能省，但可为空字符串
::after 不渲染，90% 是因为漏写了 content。它不是可选属性，是伪元素存在的前提。
使用场景：纯色圆点角标不需要文字，但依然要写 content: ""；数字角标则写 content: "9" 或 content: "99+"。
- 动态数字（如 React 中
count={5}）无法用content绑定变量，此时必须改用真实子元素或 JS 注入文本 - 若内容为 Unicode 图标（如
content: "●"或content: "ℹ"），注意字体支持和 fallback - 屏幕阅读器默认忽略
::after，重要语义信息（如“有 3 条未读消息”）需额外加aria-label
圆形角标优先用 width/height + border-radius: 50%
比起用 font-size 控制文字型角标，纯色圆点更稳定、更小、更易对齐，也更适合做“有新消息”的视觉信号。
关键参数差异：
- 圆形角标：固定
width和height，再设border-radius: 50%，无需担心字体度量差异 - 文字角标：必须同步控制
font-size、line-height（等于 height）、text-align: center，否则文字不居中 - 响应式适配时，避免写死
top: -6px；推荐抽成 CSS 自定义属性，例如--icon-size: 20px，然后用top: calc(var(--icon-size) * -0.3)
悬停提示图标要用 :hover + opacity + transition
如果目标是「鼠标移上去才显示问号提示图标」，别用 display: none 切换——它无法过渡动画。要用 opacity 和 visibility 配合 transition。
示例结构：<button class="btn-with-tip">设置</button>
-
.btn-with-tip::after默认设opacity: 0; visibility: hidden; -
.btn-with-tip:hover::after设opacity: 1; visibility: visible; - 加
transition: opacity 0.2s ease-in-out;实现平滑淡入 - 图标内容可用 Unicode（如
content: "ℹ"）或字体图标（如 Font Awesome 的\f129）
真正难的不是画出那个角标，而是让它的位置在不同尺寸、不同缩放、不同父元素 display 类型下都稳得住。多数问题其实出在定位链断裂，而不是样式写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
