测试:Treeline/style.css

/* 树形结构容器 */
.tree ul {
    list-style: none;
    margin: 0;
    padding-left: 1.5em; /* 缩进使用相对单位 */
}

.tree li {
    position: relative;
    padding-left: 1em;
    line-height: 1.6; /* 可根据需要调整，保持统一行高 */
}

/* 垂直线条：从顶部延伸到内容底部 */
.tree li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;           /* 利用 bottom 代替固定 height，自动适配内容高度 */
    border-left: 1px solid #999;
}

/* 最后一个子项的垂直线只画到一半（避免多余的竖线） */
.tree li:last-child::before {
    height: 1.2em;       /* 改为半截高度，通常为行高的一半左右，具体可微调 */
    bottom: auto;        /* 重置 bottom，改用固定高度 */
}

/* 横线：连接到文本起始位置 */
.tree li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;          /* 大致与第一行文字的中部对齐，基于 line-height 计算 */
    border-top: 1px solid #999;
    width: 0.8em;        /* 横线长度，与左内边距匹配 */
}