我正在尝试在我的网站上实现以下内容:
显然这应该能够进行更多次迭代,我真的不知道要用谷歌搜索什么,我找到了一种创建线条的方法,但我不知道如何将其与 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
}
最佳答案
你可以使用after
伪元素来放置圆圈。这里我用after
解决方案做了一个例子。
关于css - 创建一条垂直线,其中有一个圆圈,边上的文本与圆圈对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42186455/