Css 创建一条垂直线，其中有一个圆，边上的文字与圆对齐

我正在尝试在我的网站上实现以下内容：

显然，这应该能够进行更多的迭代，我真的不知道谷歌搜索什么，我找到了一种方法来创建一条线，但我不知道如何将它与圆圈结合起来，以及如何使它们与文本对齐

最终代码：

* {
    box-sizing: border-box;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li div {
    width: 50%;
    float: left;
    text-align: center;
}

ul li .zero-left {
    position: relative;
    color: #EB908B;
    width: 30%;
    text-align: right;
    padding-right: 20px;
}

ul li .zero-right {
    border-left: 3px solid #3C4C4C;
    position: relative;
    color: #3C4C4C;
    width: 70%;
    padding-left: 15px;
    text-align: left;
}

ul li .first {
    position: relative;
    color: #EB908B;
    width: 30%;
    text-align: right;
    padding-right: 20px;
}

ul li .second {
    border-left: 3px solid #3C4C4C;
    position: relative;
    width: 70%;
    padding-left: 15px;
    text-align: left;
}

ul li .second p {
    color: #EB908B;
    position: relative;
    text-align: left;
}

ul li .first::before {
    content: '';
    position: absolute;
    right: -11.5px;
    width: 20px;
    height: 20px;
    border-radius: 150%;
    border: 2px solid #3C4C4C;
    background: #3C4C4C;
    z-index:9999
}

---

您可以在伪元素之后使用

来放置圆。在这里，我用
after
解决方案做了一个示例

您可以使用这个：作为一个基准OK，我对它进行了一点更新（左侧宽度为30%，左侧宽度为70%），非常感谢！