如何在圖標之間創建垂直線（使用示例圖像）

Question

嘗試了很多事情並搜索了網頁後，我仍無法找到如何在圖像左側顯示的圖標之間創建類似的垂直線。有人有關如何實現這一目標的想法？任何幫助都感激不盡！！

Answer 1

爲sanjeev說，你可以僞代碼之前使用之前，這裏是它是如何做。運行代碼段時，請在完整頁面中查看。不知道錯誤代碼是什麼。

.timeline { 
 
    position: relative; 
 
    margin: 10px 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    counter-reset: section; 
 
} 
 
.timeline:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 3px; 
 
    background: #fdb839; 
 
    left: 32px; 
 
    margin: 0; 
 
    border-radius: 2px; 
 
} 
 
.timeline > li { 
 
    position: relative; 
 
    margin-right: 10px; 
 
    margin-bottom: 50px; 
 
    padding-top: 18px; 
 
    box-sizing: border-box; 
 
    padding-left: 90px; 
 
} 
 
.timeline > li:before, 
 
.timeline > li:after { 
 
    display: block; 
 
} 
 

 
.timeline > li:before { 
 
    counter-increment: section; 
 
    content: counter(section); 
 
    background: #fdb839; 
 
    width: 70px; 
 
    height: 70px; 
 
    position: absolute; 
 
    top: 0; 
 
    border-radius: 50%; 
 
    left: -1px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: #Fff; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    border: 15px solid #fff; 
 
    box-sizing: border-box; 
 
} 
 
.timeline > li:after { 
 
    clear: both; 
 
}

<ul class="timeline"> 
 
    <li> 
 
    asdfasdf 
 
    </li> 
 
    <li> 
 
    asdfsdf 
 
    </li> 
 
</ul>

Answer 2

可以使用CSS創建它：選擇