如何用CSS将嵌套编号列表格式化为上标层级形式？

可以通过拆分编号为多个伪元素并分别设置样式的方式实现，核心思路是利用CSS计数器分别生成父级和子级编号，再通过伪元素的样式模拟上标效果，具体实现如下：

HTML结构 #

<ol>
  <li>some text
    <ol>
      <li>some text</li>
      <li>some text</li>
      <li>some text</li>
    </ol>
  </li>
  <li>some text
    <ol>
      <li>some text</li>
    </ol>
  </li>
  <li>some text</li>
</ol>

CSS实现代码 #

/* 重置列表默认样式，初始化顶级计数器 */
ol {
  list-style: none;
  padding-left: 0;
  counter-reset: item;
}

/* 处理顶级列表项 */
ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 30px; /* 为编号预留空间 */
}

/* 生成顶级编号 */
ol > li::before {
  content: counter(item) ". ";
  position: absolute;
  left: 0;
}

/* 初始化二级列表计数器，调整内边距 */
ol > li > ol {
  counter-reset: sub-item;
  padding-left: 20px;
}

/* 处理二级列表项 */
ol > li > ol > li {
  counter-increment: sub-item;
  position: relative;
  padding-left: 40px; /* 为组合编号预留空间 */
}

/* 生成二级编号的父级部分 */
ol > li > ol > li::before {
  content: counter(item);
  position: absolute;
  left: 0;
}

/* 生成二级编号的上标部分，模拟<sup>效果 */
ol > li > ol > li::after {
  content: counter(sub-item) ". ";
  position: absolute;
  left: 18px; /* 与父级编号对齐 */
  vertical-align: super;
  font-size: 0.7em; /* 缩小字体匹配上标视觉 */
  line-height: 0; /* 避免影响正文行高 */
}

原理说明 #

由于CSS的content属性无法解析HTML标签，我们将嵌套编号拆分为两个部分：

1. 用::before伪元素显示父级编号（如1）
2. 用::after伪元素显示子级编号（如1），并通过vertical-align: super和缩小字体的方式，模拟<sup>标签的上标效果

这种方法完全通过CSS实现，不需要修改HTML结构，也能达到你想要的上标层级编号效果。

内容的提问来源于stack exchange，提问作者Gregory Sapogovsky