如何移除HTML/CSS树形视图展开时内部的竖线？

树形视图里的竖线通常靠伪元素绘制，你遇到的最后一个子元素竖线残留问题，核心是没精准控制最后一个li的垂直连线高度。以下是具体修复方案：

核心思路 #

当某个li是其父级ul的最后一个子元素时，它的垂直连线（::before伪元素）不应该延伸到父元素底部，只需要到当前li的水平连线（::after伪元素）位置即可。同时要确保嵌套层级的选择器精准匹配。

示例代码（含修复后的CSS） #

HTML结构

<ul class="tree-view">
  <li>
    一级节点A
    <ul>
      <li>二级节点A1</li>
      <li>二级节点A2
        <ul>
          <li>三级节点A2-1</li>
          <li>三级节点A2-2</li>
        </ul>
      </li>
      <li>二级节点A3</li>
    </ul>
  </li>
  <li>
    一级节点B
    <ul>
      <li>二级节点B1</li>
    </ul>
  </li>
</ul>

修复后的CSS

/* 基础样式重置 */
.tree-view, .tree-view ul {
  list-style: none;
  margin: 0;
  padding-left: 25px;
  position: relative; /* 关键：让伪元素相对当前元素定位 */
}

.tree-view li {
  position: relative;
  padding: 8px 0 8px 0;
}

/* 绘制垂直竖线 */
.tree-view li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px; /* 对应ul的padding-left值调整 */
  width: 1px;
  height: 100%;
  background-color: #666;
}

/* 绘制水平横线 */
.tree-view li::after {
  content: '';
  position: absolute;
  top: 16px;
  left: -20px;
  width: 20px;
  height: 1px;
  background-color: #666;
}

/* 移除根节点的竖线（根li没有父级横线，不需要竖线） */
.tree-view > li::before {
  display: none;
}

/* 关键：最后一个子元素的竖线只延伸到自身横线位置 */
.tree-view li:last-child::before {
  height: 16px; /* 与li::after的top值一致 */
}

/* 处理嵌套层级：父级是最后一个li时，子元素的竖线不会被父级多余高度影响 */
.tree-view li:last-child > ul > li::before {
  background-color: #666; /* 保持竖线样式，父级的before已经截断，子元素正常显示 */
}

为什么之前的尝试没生效？ #

大概率是选择器没有匹配到嵌套层级的最后一个li，比如只写了li:last-child::before但没有限定父级是ul；或者伪元素的position依赖的父元素没设置relative，导致定位混乱。另外要注意padding-left和伪元素left值的对应关系，确保竖线位置正确。

内容的提问来源于stack exchange，提问作者Yogesh Kumar