这个效果html怎么实现

Question

如图的这个效果怎么实现啊，我做了一半，没能实现

<div>
     <div style="line-height: 30px;">
         <div style="border: 1px solid gray; height: 10px; width: 10px; float: left; margin: 10px;" class="img-circle"></div>
         <div style="font-size: 14pt;">前期沟通</div>
     </div>
     <div style="margin: 0px 15px; border-left: 1px solid gray;">
          <ul>
                 <li>功能需求</li>
                 <li>文案需求</li>
                 <li>其他需求</li>
          </ul>
      </div>
</div>

Answer 1

<style>
.img-circle{
  width: 10px;
  height: 10px;
  border: 1px solid #DDD;
  border-radius: 50%;
  float: left;
  margin: 10px;
  position: relative;
}
.img-circle::after{
  content: '';
  width: 1px;
  height: 300px;
  border-left: 1px solid #ddd;
  display: block;
  position: absolute;
  top: 10px;
  left: 5px;
}
</style>

<div>
     <div style="line-height: 30px;">
         <div class="img-circle"></div>
         <div style="font-size: 14pt;">前期沟通</div>
     </div>
     <div>
          <ul>
                 <li>功能需求</li>
                 <li>文案需求</li>
                 <li>其他需求</li>
          </ul>
      </div>
</div>

Answer 2

在圆圈下放一个div设置它的背景颜色或者border-left/border-right，配合高度设置就可以了