水平线重叠成两列答案

【问题标题】：Horizontal line overlapping into two columns水平线重叠成两列
【发布时间】：2025-12-23 05:15:07
【问题描述】：

我想实现如下图所示：

问题在于选定的圆角红线。我使用了位置：绝对，伪元素，但行总是在右列结束。这应该是响应式的并且已经开始了。谁能帮帮我？

<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

【问题讨论】：

标题可以任意大小？
是的，任何大小，但响应式
谢谢，这是一个接近的解决方案。在我看来，这将需要大量媒体查询才能将圆形元素保持在适当的位置。在伪元素中使用图片（线条+圆角元素）你怎么看？
这个解决方案接近完美！还有一点：这条线在右列下重叠，这意味着它是不可见的。我使用了 Z-index: 999，但没有给出任何结果。
好的，我处理了一个 z-index，现在它可以工作了！非常感谢！

标签： html css flexbox multiple-columns

【解决方案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;
}

【讨论】：