纯CSS角标可用::before实现，关键在于父容器设position: relative、::before设absolute定位及border三角或宽高矩形技巧，并注意z-index、pointer-events及样式继承问题。
用 ::before 伪元素画角标，核心是定位 + 边框三角技巧
纯 CSS 角标不依赖额外 HTML 标签完全可行，关键是把 ::before 当成一个独立可绘图的“小画布”。它默认是行内级、无尺寸，所以必须显式设置 content（哪怕为空）、position: absolute，再结合 border 技巧生成三角形或矩形角标。
position: absolute 的父容器必须设 position: relative
否则 ::before 会相对于最近的定位祖先或 viewport 定位，导致角标飘走。卡片容器没加 position: relative 是最常见的失效原因。
- 卡片元素（如
.card）需声明position: relative -
::before内部用top/right精确控制偏移，例如右上角：top: 8px; right: 8px; - 避免用
transform: translate()做微调——它可能影响点击热区或动画表现
三角形角标用 border 技巧，矩形角标直接设宽高
三角形靠 border 颜色叠加实现，只留一个方向有颜色、其余 transparent；矩形更简单，但要注意字体大小和行高对齐。
.card {
position: relative;
}
.card::before {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ff4757;
}
若要带文字的矩形角标（如 “NEW”），改用：
立即学习“前端免费学习笔记（深入）”；
.card::before {
content: "NEW";
position: absolute;
top: 4px;
right: 4px;
background: #ff4757;
color: white;
font-size: 12px;
padding: 2px 6px;
border-radius: 2px;
}
注意 z-index 和 pointer-events 避免遮挡或误触
角标盖住卡片内容边缘时，用户可能点不到右上角的关闭按钮或图标。伪元素默认层级在元素内容之上，但未必在所有子元素之上。
- 给
::before加z-index: 1，确保它不被卡片内其他position元素覆盖 - 如果角标只是视觉装饰、不该响应点击，加
pointer-events: none - 若角标本身要可点击（比如跳转），需确保其
z-index足够高，并测试移动端 touch 区域是否足够
最易忽略的是：伪元素无法继承父元素的 font-family 或 color，所有文本样式都得单独写；另外，content 为空字符串时不能省略，否则伪元素根本不渲染。
