用 ::before 伪元素给卡片加角标需先设卡片 position: relative，再用绝对定位将伪元素固定于角落；内容、尺寸、颜色等通过 CSS 控制，配合 transform 微调对齐，支持响应式与状态切换。
用 ::before 伪元素给卡片加角标，无需改动 HTML 结构，关键是利用绝对定位 + 边距偏移，把角标“贴”在卡片的某个角上。
1. 确保卡片容器有相对定位
角标需要相对于卡片定位，所以卡片本身（比如 .card）必须设 position: relative，否则 ::before 会向上级有定位的祖先找参考点，容易错位。
- 不加
relative→ 角标可能飞到整个页面左上角或意外位置 - 加了之后，
::before的top/right才真正以卡片为基准
2. 用 ::before 生成角标内容并绝对定位
在卡片类上写伪元素，设置内容、尺寸、背景、颜色，并用 position: absolute 定位到角落。常用右上角（如“NEW”、“Hot”）示例：
.card {
position: relative;
}
.card::before {
content: "NEW";
position: absolute;
top: 8px;
right: 8px;
background: #ff4757;
color: white;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
z-index: 2;
}-
content必须有值（哪怕空字符串），否则伪元素不渲染 -
z-index建议设为正数，避免被卡片内其他内容（如图片、文字）遮挡 - 用
top/right控制右上角；换成top/left是左上角；bottom开头是下角
3. 微调对齐与响应式适配
角标太小易忽略，太大又突兀。可结合 transform 精准居中或缩放，也方便适配不同尺寸卡片：
立即学习“前端免费学习笔记（深入）”；
- 让角标水平垂直居中于右上角区域：
transform: translate(50%, -50%)配合right: 0; top: 0; - 小屏时减小字号和内边距：
@media (max-width: 768px) { .card::before { font-size: 10px; padding: 1px 6px; } } - 若角标文字动态变化（如数字徽章），建议用
min-width保证宽度一致，避免跳动
4. 可选：添加动画或状态控制
角标可配合 class 控制显隐，比如只在“推荐”卡片上显示：
.card.recommended::before {
content: "推荐";
/* 其他样式同上 */
}
/* 或用属性选择器 */
.card[data-badge="hot"]::before {
content: "?";
}- 不写
content就不显示，完全靠 CSS 控制，结构零侵入 - 加
transition: opacity .2s可实现淡入淡出效果 - 慎用
display: none隐藏伪元素——它不生效；应改用opacity: 0或删掉content
不复杂但容易忽略细节，关键是父容器定好位、伪元素定好参、微调留余量。
