如何控制边框高度？

我有两个div，一个在左边，另一个在右边。现在我想用它们之间的边框来划分这两个 div。但是全高的边框看起来很糟糕。

我想控制边框的高度。我怎么能这样做呢？

边框将始终处于包含框的完整长度（元素的高度加上其填充），除了调整其应用的元素的高度之外，无法对其进行控制。如果您只需要一个垂直分隔线，那么您could use:

<div id="left">
  content
</div>
<span class="divider"></span>
<div id="right">
  content
</div>

使用CSS：

span {
 display: inline-block;
 width: 0;
 height: 1em;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

JS Fiddle 的演示 http://jsfiddle.net/davidThomas/9MKW3/，调整高度span.container调整边框“高度”。

或者，使用伪元素（::before or ::after），给定以下 HTML：

<div id="left">content</div>
<div id="right">content</div>

以下 CSS 在任何元素之前添加一个伪元素div与另一个元素相邻的同级元素div元素：

div {
    display: inline-block;
    position: relative;
}

div + div {
    padding-left: 0.3em;
}

div + div::before {
    content: '';
    border-left: 2px solid #000;
    position: absolute;
    height: 50%;
    left: 0;
    top: 25%;
}

JS 小提琴演示 http://jsfiddle.net/davidThomas/9MKW3/1/.