连接到父级的CSS HTML子列表项行

问题描述

我目前有一个动态生成的任务列表。每个任务显示为一个列表 项目，并且正在工作。我正在尝试添加子任务。我能够静态添加2个子任务，但是不能添加更多子任务，因为连接到父任务的线路是静态的。是否可以在此处动态添加子任务，并为添加的每个子项设置一条线连接到父项？

ul {
  list-style: none;
}

ul.main::before {
  content: "";
  border: solid 2px black;
  border-width: 0 0 0 2px;
  position: absolute;
  height: 160px;
  margin-left: 10px;
  z-index: -1;
}

.items::before {
  display: inline-block;
  content: "";
  border: solid 2px black;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background: white;
}

.subitems1,.subitems2 {
  margin-left: 50px;
  border: solid 2px white;
  text-align: center;
  width: 150px;
}

.subitems1::before {
  position: absolute;
  display: inline-block;
  content: "";
  border: solid 2px black;
  border-width: 0px 0px 2px 2px;
  border-radius: 0 25px;
  width: 54px;
  height: 25px;
  margin-left: -110px;
  margin-top: -10px;
}

.subitems2::before {
  position: absolute;
  display: inline-block;
  content: "";
  border: solid 2px black;
  border-width: 0px 0px 2px 2px;
  border-radius: 0 25px;
  width: 63px;
  height: 50px;
  margin-left: -115px;
  margin-top: -40px;
}

<ul class="main">
  <li class="items">Task 1</li>
  <li class="items">Task 2
    <ul>
      <li class="subitems1">Sub Task 1</li>
      <li class="subitems2">Sub Task 2</li>
    </ul>
  </li>
  <li class="items">Task 3</li>
</ul>

解决方法

您可以使用pseudo元素来实现此结构。

我用<span>标签包裹了每个孩子，并在上面使用了::before元素。

ul {
  list-style: none;
}

ul.sub-menu {
  position: relative;
  padding: 0;
  margin-left: 30px;
  margin-top: 10px;
}

li.item span {
  position: relative;
}


ul.sub-menu li.item span::before {
  content: '';
  height: 100%;
  width: 10px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
  bottom: 10px;
  left: -10px;
  z-index: -1;
}

<ul class="main">
  <li class="items">Task 1</li>
  
  <li class="items">Task 2
    <ul class="sub-menu">
      <li class="item"><span>Sub Task 1</span></li>
      
      <li class="item"><span>Sub Task 2</span>
        <ul class="sub-menu">
          <li class="item"><span>Sub Task 1</span></li>
          <li class="item"><span>Sub Task 2</span></li>
        </ul>
      </li>
      
    </ul>
  </li>
  
  <li class="items">Task 3</li>
</ul>