如何添加下图所示的边距或线条。
[![Please see the following image.][1]][1]
答案 0 :(得分:0)
.circles {
list-style: none;
display: flex;
align-items: center;
flex-direction: column;
padding: 0;
margin: 0;
position: relative;
}
.circles::before {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 5px;
display: block;
content: '';
background: #000;
transform: translateX(-50%);
z-index: -1;
}
.circles>li {
margin-bottom: 15px;
display: flex;
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
background: #0392B2;
align-items: center;
justify-content: center;
color: #fff;
font: sans-serif;
font-size: 14px;
}
.circles>li:last-child {
margin-bottom: 0;
}
<ul class="circles">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
答案 1 :(得分:0)