如何在表格中将圆与垂直线连接起来？

Question

有人可以帮助我如何用直线将这些圈子彼此联系起来吗？

.circles {
  margin-left: .25em;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 100%;
}
span {
  margin-left: 5px;
  font-style: normal;
}
.circles2 {
  margin-top: 20px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 100%;
}

<td align="left">
  <ul style="list-style: none;">
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles2"></div></li>
  </ul>
</td>

以下是我要完成的目标的视觉呈现

Answer 1

您可以使用当前元素使用以下内容：

div.circles, div.circles2 {
  position:relative;
}
div[class^="circles"]::before {
  background:red;
  border-radius:100%;
  content:"";
  display:inline-block;
  position:absolute;
  top:50%;
  transform:translate(-50%, 50%);
}
.circles::before {
  height:10px;
  width:10px;
}
.circles2::before {
  height:20px;
  width:20px;
}
.circles::after {
  background:black;
  content: "";
  display:inline-block;
  height:30px;
  left:0;
  position:absolute;
  top:50%;
  transform:translate(-50%, 50%);
  width:2px;
  z-index:-1;
}
span {
  margin-left:15px;
}

<td align="left">
  <ul style="list-style: none;">
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles"></div><span>Text</span></li>
    <li><div class="circles2"></div></li>
  </ul>
</td>

您还可以在<li>元素上使用不带子元素的以下解决方案：

ul {
  list-style:none;
}
li {
  padding:0 0 0 15px;
  position:relative;
}
li[class^="circle-"]::before {
  background:red;
  border-radius:50%;
  content:"";
  display:inline-block;
  left:0;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
}
li.circle-1::before {
  height:10px;
  width:10px;
}
li.circle-2::before {
  height:20px;
  width:20px;
}
li::after {
  background:black;
  bottom:0;
  content:"";
  display:inline-block;
  height:20px;
  left:0;
  position:absolute;
  transform:translate(-50%, 50%);
  width:2px;
  z-index:-1;
}
li.circle-2 {
  margin-top:10px;
  padding-left:15px;
}
li:last-child::after {
  display:none;
}

<ul>
  <li class="circle-1">Text</li>
  <li class="circle-1">Text</li>
  <li class="circle-1">Text</li>
  <li class="circle-1">Text</li>
  <li class="circle-2">Text</li>
</ul>