带边框的纯 css 树

我正在尝试用纯 CSS 创建一棵带有缩进的树。我一直在尝试使用类似的东西：

ul.tree ul {
  padding-left: 5px;
}

但是我想在列表中的每个项目之间进行分隔。如果我使用上面的代码，分隔栏也会缩进，所以它不太好。

这是我当前的代码（我直接在js中进行缩进，我不喜欢）：jsfiddle

最终，我想创建一些基本上看起来像这样的东西：

知道如何在纯 CSS 中做到这一点吗？感谢最简单的答案。

简单，多层次深度支持

更新：调整以适应悬停

不需要额外的 HTML，也不必因为 css 选择器链而限制深度，因为它支持任意数量的深度级别，而无需为这些级别调整 css（无需跟踪在下一个深度级别设置的“填充”） ）。

这很有效，只有两个小限制（我不认为这会影响您）。

请参阅小提琴演示。

Add a position: relative给你的ul.tree，但保留所有子元素默认值static位置。然后更改/添加以下 css：

ul.tree a {
  display: block;
  height:30px;
  line-height: 30px;
  padding-left: 15px;
}

/* this is making our bottom border, but sizing off the .tree ul width */
ul.tree a:before { 
  content: '';
  height: 30px; /* match your <a> height */
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  border-bottom-width: 1px;
  border-bottom-color: lightgray;
  border-bottom-style: solid;
}


ul.tree a + ul {
    padding-left: 15px; /* this is your spacing for each level */
}

ul.tree a:hover:before {
  background-color: #DDDDDD;
}

限制是子元素不能设置位置，并且我们使用伪元素（这意味着它不能用于其他功能，但这可能也不是问题）。