css - 创建一条垂直线，其中有一个圆圈，边上的文本与圆圈对齐

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