css制作角标

使用伪元素创建角标

通过 ::before 或 ::after 伪元素生成角标，结合绝对定位调整位置。示例代码：

.superscript {
  position: relative;
  display: inline-block;
}
.superscript::after {
  content: "1";
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  font-size: 0.75em;
  color: red;
}

利用 transform 微调位置

当需要更精确控制角标位置时，可配合 transform 属性：

.subscript {
  position: relative;
}
.subscript::before {
  content: "注";
  position: absolute;
  bottom: -0.8em;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  background: #333;
  color: white;
  padding: 0 0.3em;
  border-radius: 3px;
}

圆形数字角标实现

创建常见的圆形通知角标样式：

.badge {
  position: relative;
}
.badge::after {
  content: "3";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: red;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}

文字阴影增强效果

为角标添加立体效果：

.shadow-sup {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

响应式角标适配

使用相对单位确保不同屏幕尺寸下的显示效果：

.responsive-badge {
  font-size: calc(12px + 0.5vw);
  padding: 0.2em 0.4em;
}