css - 纯 CSS 用于两个文本区域之间的边框

Question

我得到的设计是在两个菜单选项之间有 2px 的边框。请看图片:

棘手的是边框比菜单文本的高度短。 菜单文本必须分两行，与它们的显示方式完全相同。我有更多这样的元素，具有不同的文本宽度。 我想要一个纯 CSS 解决方案，但找不到正确的方法。我尝试了不同的方法，这是我最接近的方法:

    <div style="height: 15px; display:inline-block; border-left: 2px solid red; padding:0 15px;">First<br/>Item</div>
    <div style="height: 15px; display:inline-block; border-left: 2px solid red; padding:0 15px;">Second<br/>Item</div>

以上作品见图片:

问题是边框不在垂直中间。如何让边框垂直居中？

或任何其他 CSS 方式来实现设计中显示的内容？

Answer 1

带有 :before 伪元素的示例: https://jsfiddle.net/qfadxsyd/7/

.box:before {
  position:absolute;
  content:'';
  height:80%;
  right:-1px;
  width:2px;
  top:0;
  bottom:0;
  margin:auto;
  background:red;
 }

为了隐藏最后的边界，还有一些搞笑的游戏。祝你好运!

注意:我移除了 div 之间的空白，以移除 inline-block; 元素之间的重影边距:

<div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div><div class="box box">box<br/>Item</div>