创建与垂直线和水平线相连的CSS圆

我想在CSS中创建一个在右边和底部有线条的圆。与下图类似。我发现了一个水平连接圆圈的css。我不知道如何添加垂直线或类似于我附加的图像

@输入“指南针/css3”；
李{
宽度：2米；
高度：2米；
文本对齐：居中；
线高：2米；
边界半径：1米；
背景：道奇蓝；
边缘：0 1米；
显示：内联块；
颜色：白色；
位置：相对位置；
}
李：以前{
内容：''；
位置：绝对位置；
顶部：.9em；
左：-4em；
宽度：4em；
高度：.2米；
背景：道奇蓝；
z指数：-1；
}
李：第一个孩子：以前{
显示：无；
}
.主动{
背景：道奇蓝；
}
.active~li{
背景：浅蓝色；
}
.active~li：：之前{
背景：浅蓝色；
}
身体{
字体系列：无衬线；
填料：2米；
}

一,
二,
三,
4
五,
六,
七,

查看更新的笔：

以下是相关代码：

HTML:

试试看

我更改了一些属性并添加了li:after

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 1em 1em;
  color: white;
  position: relative;
}
li::before {
  content: '';
  position: absolute;
  top: -4.1em;
  left: 1em;
  /* width: 4em; */
  width: .2em;
  height: 2em;
  background: dodgerblue;
  z-index: -1;
}
li::after {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 1em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}
li:first-child::before {
  display: none;
}
.active {
  background: dodgerblue;
}
.active ~ li {
  background: lightblue;
}
.active ~ li::before {
  background: lightblue;
}
body {
  font-family: sans-serif;
  padding: 2em;
}

---

使用伪元素的组合来实现目标

ul{
列表样式：无；
利润率：50像素；
填充：0；
字体：普通16px/22px Arial；
颜色：#999；
}
李{
溢出：隐藏；
位置：相对位置；
填充：0 0 10px 35px；
}
李：以前{
内容：''；
位置：绝对位置；
左：9px；
顶部：9px；
宽度：20px；
高度：999px；
边框：2件纯色浅蓝色；
边框宽度：2px 0 0 2px；
}
李：最后一个孩子：以前{
边框宽度：2px0；
}
李：之后{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：16px；
高度：16px；
背景：#fff；
边框：2件纯色浅蓝色；
边界半径：50%；
}
李,现在,，
李，通过了{
颜色：#000；
}
李：当前：：以前{
边框顶部颜色：淡蓝色；
}
当前：：之后{
边框颜色：淡蓝色；
背景：道奇蓝；
}
李,过去,，
过了……之后{
边框颜色：淡蓝色；
}

步骤1
步骤2
步骤3
步骤#4
步骤说明
第五步
第六步
第7步

你能从上到下缓慢地设置线条动画吗。。？

<div></div><span id="step1">step1</span>
<div id="second"></div>
<div></div><span id="step2">step2</span>
<div id="last"></div>

@import "compass/css3";

div {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 0 1em;
  color: white;
  position: relative;
 -ms-transform: rotate(-180deg); 
 -webkit-transform: rotate(-180deg); 
 transform: rotate(-180deg);
}

div::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;

}



div:first-child::after {
  display: none;
}



body {
  font-family: sans-serif;
  padding: 2em;
}
#last{
  transform: rotate(-90deg);
  width:0;
  height:0;
}
 #second{
   transform: rotate(-90deg);
   width:0;
   height:10;
   left:16px;
   top:-16px;

}
#step1{
  position:absolute;
  top:40px;
  left:150px
}
#step2{
  position:absolute;
  top:104px;
  left:150px
 }

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 1em 1em;
  color: white;
  position: relative;
}
li::before {
  content: '';
  position: absolute;
  top: -4.1em;
  left: 1em;
  /* width: 4em; */
  width: .2em;
  height: 2em;
  background: dodgerblue;
  z-index: -1;
}
li::after {
  content: '';
  position: absolute;
  top: 0.9em;
  left: 1em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}
li:first-child::before {
  display: none;
}
.active {
  background: dodgerblue;
}
.active ~ li {
  background: lightblue;
}
.active ~ li::before {
  background: lightblue;
}
body {
  font-family: sans-serif;
  padding: 2em;
}