这个效果html怎么实现

<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>