如何为Bootstrap行动态添加有序列表编号？

我正在使用Bootstrap栅格系统，希望为每一行添加前缀编号，呈现1、2、3、4这样的有序列表效果，请问该如何实现？

预期效果：

1. content will appear here
2. content will appear here
3. content will appear here
4. content will appear here

原始代码示例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
</div>

方法一：CSS伪元素实现（不修改原有HTML结构） #

通过CSS计数器给每行自动生成编号，无需改动现有HTML布局：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<style>
  .container {
    counter-reset: row-num; /* 初始化计数器 */
  }
  .row {
    counter-increment: row-num; /* 每行计数器+1 */
    position: relative;
    padding-left: 2rem; /* 给编号预留空间 */
  }
  .row::before {
    content: counter(row-num) "."; /* 渲染编号和后缀点 */
    position: absolute;
    left: 0;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
  <div class="row">
    <div class="col">
      content will appear here
    </div>
  </div>
</div>

方法二：语义化有序列表（修改HTML结构） #

利用HTML原生有序列表实现编号，同时保留Bootstrap栅格类，更符合语义化标准：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<style>
  /* 可选：调整列表默认样式，适配Bootstrap布局 */
  ol.container {
    list-style-position: inside;
    padding-left: 0;
  }
</style>

<ol class="container">
  <li class="row">
    <div class="col">
      content will appear here
    </div>
  </li>
  <li class="row">
    <div class="col">
      content will appear here
    </div>
  </li>
  <li class="row">
    <div class="col">
      content will appear here
    </div>
  </li>
  <li class="row">
    <div class="col">
      content will appear here
    </div>
  </li>
</ol>

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