自定义ol列表CSS样式与flex对齐

当需要在四舍五入的圆圈中写一个无点ol列表，并与下面的行连接时，我被case震惊了，如下所示：

我曾尝试使用伪元素来实现它，但总是对许多困难感到震惊，尤其是对齐

想法是尽可能简单地编写它，并尝试使用flex。 或者，至少我想听听大家的意见，那就是只有在显示：桌子的情况下才有可能实现对齐

谢谢

代码如下

HTML

---

在之前（你的思路是正确的！），我花了一些时间来处理

：但是我从简化HTML和删除CSS开始

它应该是这样的：


我最终得到了以下HTML：

<div id="wrapper">
    <ol>
        <li>
            <p>Lorem upsum1</p>
        </li>
        <li>
            <p>Lorem upsum imsum huipsum. Lorem upsum imsum huipsum. Lorem upsum imsum huipsum.</p>
        </li>
        <li>
            <p>Lorem upsum</p>
        </li>
    </ol>
</div>


它的响应性不是很强，因为如果圆的长度超过1行，则必须使用
边距顶部
来定位圆，但我很确定您可以将其作为最终解决方案的垫脚石

你也可以看看几周前，我通过创建两个列表来解决这个问题。如果我的答案不够，这些答案可能会有用。
首先，删除
.ol
。您试图直接针对
ol
，而不是
class=“ol”
的对象。
.ol {
  list-style-type: none;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: stretch;

  > li {
    display: flex;
    height: 3rem;
    align-items: center;
  }

  &:before {
    position: absolute;
    top: 10vw;
    bottom: 10vw;
    left: 75px;
    width: 1px;
    content: " ";
    margin-left: -4px;
    background-color: #111;
    z-index: -1;
  }

  .number-round {
    vertical-align: middle;
    // display: table-cell;
    font-size: 90%;
    z-index: 100;
    text-align: center;

    & :before {
      border: 1px solid #111;
      border-radius: 50%;
      background: black;
      display: inline-block;
      width: 28px;
      height: 28px;
      margin: 0 14px 0 18px;
      padding-top: 1px;
      font-size: 13px;
    }
  }
}

<div id="wrapper">
    <ol>
        <li>
            <p>Lorem upsum1</p>
        </li>
        <li>
            <p>Lorem upsum imsum huipsum. Lorem upsum imsum huipsum. Lorem upsum imsum huipsum.</p>
        </li>
        <li>
            <p>Lorem upsum</p>
        </li>
    </ol>
</div>

html, body {
    height: 100%;
    width: 100%;
}
#wrapper {
    height: 300px;
    overflow: hidden;
}

ol li {
    height: 60px;
}

ol li p {
    padding-left: 20px;
    vertical-align: middle;
    display: inline-block;
}

ol:before {
    content:"";
    width: 1px;
    height: 120px;
    margin-top: 20px;
    background: black;
    position:absolute;
    left:33px;
    z-index: -2;
}
ol li:before {
    content:"";
    width: 26px;
    height: 26px;
    border: 1px solid black;
    background: #fff;
    position: absolute;
    left: 19px;
    margin-top: 9px;
    border-radius: 50%;
    z-index: -1;
}

ol li:nth-child(2) {
    margin-top: -14px;
}

ol li:nth-child(2):before {
    margin-top: 18px;
}