水平线重叠成两列

Question

我想在下面的图片中实现：

问题出现在选定的红线上，带有圆形的开头。我使用position：absolute，pseudoelements，但是行总是在右列结束。这应该是敏感的，并有圆润的开始。 任何人都可以帮助我吗？

<div class="row">
    <div class="col-1 col-md-6">
         <h3>heading</h3>
    </div>
    <div class="col-2 col-md-6">
         <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. </p>
    </div>
</div>

.col-1,
.col-2 {
  padding: 40px;
  border: 1px solid #000;
}
.row {
  width: 400px;
  margin: 0 auto;
  display: flex;
}
p {
  border: 1px solid #000;
  padding: 10px;
}
h3 {
  padding: 0;
  margin: 0;
}

https://codepen.io/anon/pen/jGrKae

Answer 1

工作解决方案：

<div class="row">
    <div class="col-1 col-md-6">
         <h3>heading</h3>
    </div>
  <span class="line"><span></span></span>
    <div class="col-2 col-md-6">
         <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. </p>
    </div>
</div>

.col-1, .col-2 {
  padding: 40px;
  border: 1px solid #000;
}
.row {
  width: 100%;
  margin: 40px;
  display: flex;
}
p {
  border: 1px solid #000;
  padding: 10px;
}
h3 {
  padding: 0;
  margin: 0;
}

.line {
  position: relative;
}

.line span {
  position: absolute;
  background: red;
  display: inline-block;
  height: 1px;
  /* padding + border */
  top: 41px;
  right: -50px;
  width: 500px;
}
.line span:before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid red;
  border-radius: 11px;
  top: -5px;
  left: -10px;
}