css - (CSS) 高度拉伸(stretch)与顶部 : 0 and bottom: 0 with Pseudo-Element?

Question

我正在使用 float: left; 和 float: right; 在两个容器上进行两列布局。为了在视觉上将它们与容器分开，我想通过父容器中的伪元素在它们之间画一条垂直线。

我的代码:

.twocol {
  position: relative;
}

.twocol.divided:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed #000;
}

.leftcol {
  float: left;
  width: 50%;
  padding-right: 20px;
}

.rightcol {
  float: right;
  width: 50%;
  padding-left: 20px;
}

然后是 html:

<div class="twocol divided">
  <div class="leftcol">...</div>
  <div class="rightcol">...</div>
</div>

使用 top: 0; 和 bottom: 0; 伪元素应该从父 .twocol 的顶部到底部画一条线。但是没有任何反应。

在 .twocol 内的附加 html 元素 div.divider 上使用与伪元素相同的规则效果很好并划清界线。这种技术对伪元素来说是不可能的，还是我错过了什么？

这里是jsfiddle.net/tw1vp2dg使用无效的伪元素和有效的 html 元素示例。

Answer 1

您的 .twocol:before 选择器有 display: table。

将display:block 或不同于table 的其他值添加到伪元素的样式中，或删除.twocol:before 选择器。

Example