先看下最终效果

恩就类似这种，废话不多说，直接上代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .b_gray { position: absolute; left: -.21rem; background: #EDEDED; width: 1px; height: 143%; top: -76%; } .lb_container { margin-left: .25rem; padding: 0 0 0 30px; position: relative; height: 40px; line-height: 40px; } .b_gray::after { content: "."; width: 20px; height: 20px; background: #ccc; border-radius: 50%; display: block; position: absolute; top: 63%; left: -10px; z-index: 9; } .container { padding: 40px 30px 40px 40px; } </style></head><body> <div class="container"> <div class="lb_container"> <div alt="通过" class=" b_gray"></div> <div> <h4 class="t2"><span> 第一步</span></h4> </div> </div> <div class="lb_container"> <div alt="通过" class="b_gray"></div> <div> <h4 class="t2"><span> 第二步</span></h4> </div> </div> </div></body></html>

小圆用伪元素生成

线为div元素