树形图-移动最后一个子项'；在html/css中，将其转换为一个级别

我想创建一个树形图，其中最后一个子节点应该在第n级（树的最后一行）。我是在参考。到现在为止，我得到了这样的输出（左），试图得到正确的图像

我尝试过在：before和：after中使用height和margin top，但节点之间的链接不正确。我正在动态地迭代树的数据，如果有更多的树数据，可能会有更多的级别。所以需要将节点之间的线连接设置为泛型。我怎么能得到这个？请给我一些建议

*{
保证金：0自动；
填充：0；
文本对齐：居中；
颜色：黑色；
字体系列：tahoma；
}
.项目ul{
填充顶部：20px；
位置：相对位置；
}
/*使所有子项“内联”*/
.项目李{
/*浮动：左*/
显示：内联块；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
}
/*添加水平连接器。注：它们是2个伪元素*/
.items li:：之前，.items li:：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
宽度：55%；
高度：42px；
z指数：-1；
边框顶部：1px实心#CCC；
}
李：之后{
左边框：1px实心#CCC；
左：50%；
右：自动；
}
/*从单个孩子身上拆下左右接头*/
.items li:独生子女：：之后，.items li:独生子女：：之前{
显示：无；
}
.李：独生子女{
填充顶部：0；
}
/*拆下“外部”接头*/
.items li:first child:：before.items li:last child:：after{
边界：0无；
}
/*为最后一个节点添加向下连接器*/
.items li:最后一个子项：：之前{
右边框：1px实心#CCC；
边界半径：0 5px 0 0；
}
/*将曲线添加到第一个子对象的连接线*/
.项目李：第一个孩子：：之后{
边界半径：5px0；
}
/*从父级添加向下连接器*/
.项目ul：：之前{
内容：''；
左边框：1px实心#CCC；
z指数：-1；
高度：20px；
位置：绝对位置；
顶部：0px；
左：50%；
宽度：0；
}
/*为每个项目添加化妆品*/
.项目李a{
字体大小：12px；
背景色：白色；
边框：1px实心#CCC；
填充物：5px10px；
高度：14px；
文字装饰：无；
显示：内联块；
边界半径：4px；
}
/*悬停每个项目时更改背景颜色*/
.项目a：悬停{
背景色：#EEF；
}
/*多亲实验*/
/*为父母增加保证金*/
.项目li a:不（：仅为类型）{
位置：相对位置；
边缘底部：16px；
}
/*从每个多重父级添加“向下”连接器（垂直线），最后一个除外*/
.项目li>a:不（：类型的最后一个）：：之后{
内容：''；
位置：绝对位置；
左边框：1px实心#CCC；
边框底部：1px实心#CCC；
顶部：20px；
宽度：75%；
高度：20px；
左：50%；
z指数：-1；
}
/*最后一个多重父级的特殊情况，使用边框权限*/
.items li>a:not（：仅类型的）：类型的最后一个：：after{
内容：''；
位置：绝对位置；
右边框：1px实心#CCC；
边框底部：1px实心#CCC；
顶部：20px；
宽度：50%；
高度：20px；
右：50%；
z指数：-1；
边框右下半径：5px；
}
/*将曲线线指定给第一个多重父对象*/
.items li>a:not（：仅属于类型）：第一个子项：：之后{
边框左下半径：5px；
}
/*多重父母的中间因素*/
.items li>a:not（：第一个子项）：not（：类型的最后一项）：：before{
内容：''；
位置：绝对位置；
边框底部：1px实心#CCC；
顶部：40px；
宽度：50%；
右：50%；
z指数：-1；
}
.项目ul：最后一个li型{
左侧填充：0；
右边填充：0；
}