创建一条垂直线，其中有一个圆圈，两侧的文字与圆圈对齐

Question

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

显然这应该可以继续进行更多的迭代，我真的不知道谷歌的用途，我找到了创建一条线的方法，但我不知道如何将它与Circles结合起来以及如何制作与文本一致的那些。

最终代码：

* {
    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
}

Answer 1

您可以使用after伪元素来放置圆圈。我在这里用after解决方案做了一个例子。

jsfiddle