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

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

ul{
列表样式：无；
}
主要内容：之前{
内容：“；
边框：纯色2px黑色；
边框宽度：0.2px；
位置：绝对位置；
高度：160px；
左边距：10px；
z指数：-1；
}
.项目：：之前{
显示：内联块；
内容：“；
边框：纯色2px黑色；
宽度：25px；
高度：25px；
右边距：10px；
背景：白色；
}
.分项1，
.分项2{
左边距：50像素；
边框：纯色2px白色；
文本对齐：居中；
宽度：150px；
}
.子项1:：之前{
位置：绝对位置；
显示：内联块；
内容：“；
边框：纯色2px黑色；
边框宽度：0px 0px 2px 2px；
边界半径：0 25px；
宽度：54px；
高度：25px；
左边距：-110px；
利润上限：-10px；
}
.子项2:：之前{
位置：绝对位置；
显示：内联块；
内容：“；
边框：纯色2px黑色；
边框宽度：0px 0px 2px 2px；
边界半径：0 25px；
宽度：63px；
高度：50px；
左边距：-115px；
利润上限：-40px；
}

任务1
任务2

子任务1
子任务2


任务3

您可以使用

伪

元素来实现此结构

我用

标签包装了每个孩子，并在上面的

元素之前使用了
：


ul{
列表样式：无；
}
ul子菜单{
位置：相对位置；
填充：0；
左边距：30px；
边缘顶部：10px；
}
项目跨度{
位置：相对位置；
}
ul.子菜单li.项目跨度：：之前{
内容：''；
身高：100%；
宽度：10px；
边框底部：1px实心#000；
左边框：1px实心#000；
位置：绝对位置；
底部：10px；
左：-10px；
z指数：-1；
}

任务1
任务2

子任务1
子任务2

子任务1
子任务2




任务3
谢谢您的帮助。有了你的评论，我可以让它工作了。