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

# 的是  # 但要  # 为空  # 跳转  # 不被  # 若要  # css  # html  # 字符串  # pointer  # 角形  # 继承  # 最常见  # border  # transform  # 相对于  # position  # 都得  # 伪元素  # viewport 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】