如何在左侧浮动div中实现垂直连续序号列表且无需添加额外h2标签

完全不需要在左侧窄div内手动添加任何标签，仅通过CSS即可实现需求，核心用到CSS计数器、等高布局技巧，具体实现如下：

第一步：布局基础适配 #

先保证左右浮动div等高，避免左侧高度不足导致序号展示不全：

<!-- 现有基础结构示例 -->
<div class="container">
  <div class="left-sidebar"></div>
  <div class="right-content">
    <!-- 右侧任意内容，高度自适应 -->
  </div>
</div>

/* 父容器清除浮动，避免高度塌陷 */
.container::after {
  content: "";
  display: table;
  clear: both;
  overflow: hidden;
}
.left-sidebar {
  float: left;
  width: 60px; /* 按需调整侧边栏宽度 */
  /* 负margin+正padding实现左右等高，适配任意右侧内容高度 */
  padding-bottom: 9999px;
  margin-bottom: -9999px;
  position: relative;
}
.right-content {
  float: right;
  width: calc(100% - 60px); /* 减去左侧侧边栏宽度 */
}

第二步：生成连续序号（两种场景可选） #

场景1：序号与右侧内容行/块一一对应 #

适合需要序号和右侧每一段内容对齐的场景，完全不需要操作左侧div：

.container {
  counter-reset: content-num 0; /* 初始化计数器 */
}
/* 右侧需要对应序号的块级元素触发计数器自增 */
.right-content p, .right-content div, .right-content section {
  counter-increment: content-num;
  position: relative;
}
/* 用伪元素将序号渲染到左侧侧边栏区域 */
.right-content p::before, .right-content div::before, .right-content section::before {
  content: counter(content-num);
  position: absolute;
  /* 数值按需调整，确保序号落在左侧侧边栏范围内 */
  left: -70px;
  top: 0;
  width: 60px;
  text-align: right;
  color: #666;
}

场景2：左侧纯连续序号填充，无需绑定右侧内容 #

适合只需要左侧垂直铺满序号，不管右侧内容结构的场景：

.left-sidebar {
  line-height: 24px; /* 序号行高，按需调整 */
}
.left-sidebar::before {
  /* 按你需要的最大行数补充即可，比如最多支持1000行就补到1000，无需额外逻辑 */
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20";
  white-space: pre;
  position: absolute;
  right: 8px;
  top: 0;
  color: #666;
}
/* 如果序号超出高度，加滚动即可 */
.left-sidebar {
  overflow-y: auto;
}

两种方案都不需要在左侧div内添加任何h2或自定义标签，完全通过CSS实现，适配任意高度变化。

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