javascript - 这个效果html怎么实现

Question

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

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

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>

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

Answer 2

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