父容器必须设position: relative，否则::after角标会相对于body定位而偏移；需显式声明content: ""，并配合display: inline-block/block及right/bottom微调位置。
父容器必须设 position: relative
伪元素 ::after 默认相对于最近的已定位祖先定位。如果父元素没设 position: relative，角标就会飞到 body 左上角或不可见位置——这是最常踩的坑。
常见错误现象：::after 角标完全偏离图标、按钮或卡片；检查 computed styles 会发现它的 offsetParent 是 document.body。
- 哪怕父元素是
<i>或<span>这类 inline 元素，也得加position: relative - 推荐同时加
display: inline-block或display: block，避免 inline 元素的 baseline 对齐导致角标上下偏移 - 若父容器本身有
transform（如缩放、平移），它也会成为定位上下文，此时需额外测试角标是否随缩放错位
content 必须显式声明且不能为 none
content: "" 是伪元素渲染的前提，不是可选项。漏写、写成 content: none 或 content: unset，角标直接不出现。
实际使用中：
立即学习“前端免费学习笔记（深入）”；
- 数字型角标用
content: "99+"；红点型用content: ""（靠背景色撑开） - 动态内容（如 React 中的
{count}）无法绑定到content，此时必须改用真实 DOM 子元素 - 字体图标（如 Font Awesome）可用 Unicode，例如
content: "\f0f3"，但要确保font-family正确设置
右上角红点和数字角标的尺寸与居中控制
纯色圆点和带文字的角标，实现方式差异大，不能混用同一套样式逻辑。
红点（如未读消息提示）：
- 固定宽高 +
border-radius: 50%最稳，例如width: 8px; height: 8px; - 用
box-shadow: 0 0 2px rgba(0,0,0,.2)增强视觉存在感，防高 DPI 下模糊 - 避免用
transform: scale()或transform: translate()微调位置——会触发重排，且在缩放/变字体时像素对不齐
数字角标（如 “5”、“99+”）：
-
line-height必须等于height才能垂直居中，且text-align: center不可少 - 不要依赖
padding控制大小，易受font-size和line-height影响；优先用width/height固定容器 - 小字号建议
font-size: 10px～12px，搭配text-transform: uppercase防止字母高低不一
三角形角标要用 border 技巧，且三边必须透明
用 ::after 画右下角小三角（如“新”字旁箭头），本质是靠三边 transparent + 一边有色形成的斜角区域。漏设透明边，旧版浏览器（IE8–10）会残留边框或显示异常。
正确写法：
.icon::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
border: 6px solid transparent;
border-top-color: #ff4757;
border-right-color: #ff4757;
}
- 必须四边
border-width相等，否则三角歪斜 -
border-color: transparent transparent #ff4757 transparent等价但可读性差，不推荐 - 现代项目可用
clip-path: polygon(0 0, 100% 0, 100% 100%)，更直观，但 IE 完全不支持
真正难的不是画出来，而是让角标在不同图标尺寸、缩放比例、DPR 下都稳在右上角不动。硬编码 top: -6px 在响应式场景下必然失效，需要用 CSS 自定义属性联动或相对单位做适配——这点多数人上线后才意识到。
