Question

我正在尝试使用伪元素在纯CSS中创建一个垂直树：after和：before。我有大部分工作但是如果我在最后一项中有一个子树，那么垂直条也会扩展。

我一直在搜索一个类似的树，但是大多数脚本都是居中的树，我需要一个类似于Windows中的目录选择器。如果你检查jsfiddle问题将是非常明显的。 http://jsfiddle.net/P76TQ/1/

我已经在这个问题上花了太多时间，所以我很感谢你的帮助。如果你有一个比我更好的解决方案的建议，我全都听见了！

级别是水平的，项目是垂直的：

<div class="title">Question 1</div>
<div class="lv1 level">
    <div class="item">
      <div class="title">Item-1</div>
      <div class="lv2 level">
        <div class="item">
          <div class="title">Item-1-1</div>
        </div>
        <div class="item">
          <div class="title">Item-1-2</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在一个非常丑陋的黑客中，你可以用背景颜色掩盖：

.item:last-child::after {
    background-color: white;
    bottom: 0;
    content: '';
    left: -40px;
    position: absolute;
    top: 16px;
    width: 2px;
}

At least it works!

如何使用伪元素在CSS中创建垂直树

1 个答案: