纯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>

Answer 2

您可以使用:before伪元素

执行此操作

body, html, ul {
  margin: 0;  
}

.content {
  display: flex;
  align-items: center;
  list-style-type: none;
  padding: 0;
}

li {
  position: relative;
  padding: 0 15px;
  text-align: center;
}

li:before {
  position: absolute;
  content: '';
  border-left: 2px solid red;
  height: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

<ul class="content">
  <li>First <br> Item</li>
  <li>Second <br> Item</li>
  <li>Lorem <br> ipsum  dolor</li>
  <li>lessons & <br> resources</li>
  <li>Lorem <br> ipsum <br> dolor</li>
</ul>

Answer 3

这可能适合你。

.items{
  height: 15px; 
  display:inline-block; 
  border-left: 2px solid #777; 
  padding:0 15px;
  padding-bottom:20px;
  color:#777;
  margin-top:10px;
}

#no-border{
  border:none;
  }

<div id="no-border" class="items">First<br/>Item</div>
    <div class="items">Second<br/>Item</div>