如何实现带顶部对齐内容与内联URL的两行下沉式有序列表？

直接用HTML结构配合CSS计数器就能实现，完全不需要把内容塞进content属性里，自然支持内联链接。具体方案如下：

HTML结构 #

<ol class="two-line-num-list">
  <li>
    <span class="num-block"></span>
    <div class="item-content">
      这是列表项内容，可直接添加<a href="#">内联URL</a>，链接能正常点击跳转。
    </div>
  </li>
  <li>
    <span class="num-block"></span>
    <div class="item-content">
      第二个列表项，测试多行文本的排版效果，<a href="#">链接元素</a>不受样式影响。
    </div>
  </li>
</ol>

CSS样式 #

/* 重置列表默认样式 */
.two-line-num-list {
  list-style: none;
  padding: 0;
  counter-reset: list-counter; /* 初始化计数器 */
}

/* 列表项采用flex布局，分离编号和内容 */
.two-line-num-list li {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: flex-end;
}

/* 编号块：实现两行下沉视觉效果 */
.two-line-num-list .num-block {
  counter-increment: list-counter;
  width: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 12px;
}

/* 生成编号数字 */
.two-line-num-list .num-block::before {
  content: counter(list-counter);
  font-size: 1.3rem;
  font-weight: 700;
}

/* 生成编号下方的短横线，形成两行下沉效果 */
.two-line-num-list .num-block::after {
  content: "";
  width: 18px;
  height: 1px;
  background-color: #333;
  margin-top: 5px;
}

/* 内容块：和编号第二行对齐 */
.two-line-num-list .item-content {
  flex: 1;
  padding-top: 1.1rem;
}

说明 #

1. 用CSS计数器自动生成有序编号，不用手动写数字，维护更方便
2. 内容部分是独立的HTML容器，可自由添加<a>标签、格式化文本，完全支持内联URL
3. 通过flex布局和padding控制，实现编号两行下沉、内容与编号第二行对齐的视觉效果

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