你想实现 角标效果（Badge / 标签），既可以放在 文章或图标上，效果美观且实用。我给你写一个 完整 HTML + CSS 示例，支持：

  • 角标显示数字或文字
  • 可以放在任意图标或文章元素上
  • 支持圆角、背景色、悬浮效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 角标效果示例</title>
<style>
/* 基本容器 */
.container {
  position: relative; /* 角标相对于此元素定位 */
  display: inline-block;
  margin: 30px;
  font-family: Arial, sans-serif;
}

/* 图标样式 */
.icon {
  width: 80px;
  height: 80px;
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border-radius: 12px;
  position: relative;
}

/* 角标样式 */
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 文章示例 */
.article {
  position: relative;
  border: 1px solid #ccc;
  padding: 20px;
  width: 200px;
  border-radius: 8px;
  margin: 30px;
}

.article .badge {
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 2px 6px;
}

/* 鼠标悬浮角标变化 */
.container:hover .badge {
  transform: scale(1.2);
  transition: all 0.3s ease;
}
</style>
</head>
<body>

<h2>角标示例</h2>

<!-- 图标带角标 -->
<div class="container">
  <div class="icon">★</div>
  <div class="badge">3</div>
</div>

<!-- 文章带角标 -->
<div class="article">
  <h3>文章标题</h3>
  <p>这是一篇示例文章内容，用于展示角标效果。</p>
  <div class="badge">NEW</div>
</div>

</body>
</html>

✅ 功能特点

  1. 通用性强：角标可以附在任何元素上（图标、按钮、文章卡片）。
  2. 响应式：使用 position: absolute 相对于父元素定位。
  3. 美观：圆角、阴影、悬浮放大效果。
  4. 自定义灵活：颜色、大小、位置可自由调整。