css 角标

/* CSS 角标示例代码 */

/* 定义一个基本的角标样式 */
.superscript {
  font-size: 75%; /* 设置角标字体大小为默认字体大小的75% */
  vertical-align: super; /* 将文本垂直对齐到上方 */
  line-height: normal; /* 调整行高以适应角标 */
}

/* 使用 ::before 或 ::after 伪元素创建角标 */
.example::after {
  content: "新"; /* 角标内容 */
  display: inline-block;
  padding: 2px 4px; /* 内边距 */
  background-color: red; /* 背景颜色 */
  color: white; /* 文字颜色 */
  font-size: 10px; /* 角标字体大小 */
  border-radius: 2px; /* 圆角 */
  margin-left: 4px; /* 左边距 */
  vertical-align: super; /* 垂直对齐到上方 */
}

/* HTML 示例代码 */
/*
<span class="example">产品</span>
*/

解释说明：

1. .superscript 类：这是一个简单的角标样式，通过 font-size 和 vertical-align 属性来调整角标的大小和位置。你可以将这个类应用到任何需要角标的元素上。

2. .example::after 伪元素：使用 ::after 伪元素可以在目标元素后面添加一个角标。通过 content 属性定义角标的内容，background-color 和 color 设置角标的背景和文字颜色，border-radius 创建圆角效果，vertical-align: super 确保角标位于文本的上方。

3. HTML 示例代码：在 HTML 中，你可以通过 <span> 标签并应用 .example 类来展示带有角标的效果。

如果你需要进一步定制角标样式，可以根据具体需求调整这些属性。