将div与代表线的线连接起来的最佳方法是什么？

Question

我试图找出解决该问题的方法，我想到的一些方法是在每个子任务的伪元素之后使用，只显示左边界和下边界并将其相对放置，但是不会工作，如果我有要深入多层的任务。我不能真正将每个任务放在带边框的div内，因为它们会以尴尬的地方结尾并且不是有效的html。

我能想到的最好的解决方案是使用一个div包含所有子任务并形成一条垂直线。为了制作水平线，我将在每个子任务中使用before伪元素。应该可以，对吧？

我正在为这个项目使用React，每个任务都是一个React组件。

问题的设计：

Answer 1

这是一个幼稚的解决方案：

      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
      .cards {
        width: 800px;
        margin: 0 auto;
      }
      .card {
        width: 100%;
        background: #fff;
        background-color: #fff;
        margin: 0 0 10px 0;
        box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
        border-radius: 8px;
        padding: 20px;
        position: relative;
        clear: both;
      }
      .parent {
        height: auto;
      }
      .child {
        float: right;

        width: 100%;
        border-left: 1px dotted #ccc;
        padding-left: 20%;
      }
      .child .card:after {
        content: '';
        width: 25%;
        border: 1px dotted #ccc;
        position: absolute;
        left: -25%;
        top: 50%;
      }

    <div class="cards">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="parent">
        <div class="card">Card 3</div>
        <div class="child">
          <div class="card">Child card 1 of Card 3</div>
          <div class="parent">
            <div class="card">Child card 2 of Card 3</div>
            <div class="child">
              <div class="parent">
                <div class="card">Child card 1 of Child Card 2</div>
                <div class="child">
                  <div class="card">Child card 1 of Child Card 1</div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">Child card 3 of Card 3</div>
          <div class="card">Child card 4 of Card 3</div>
          <div class="card">Child card 5 of Card 3</div>
          <div class="card">Child card 6 of Card 3</div>
          <div class="card">Child card 7 of Card 3</div>
        </div>
      </div>
      <div class="card">Card 4</div>
    </div>

在codepen中。