css 卡片角标怎么不用额外标签实现_利用 before 伪元素生成角标

纯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 为空字符串时不能省略，否则伪元素根本不渲染。