利用内联元素的 padding 实现高度可控的『管道符』

内联元素的 padding 属性，其上下 padding 视觉表现为层叠，但其会影响外部尺寸。relative 元素的定位、盒阴影 box-shadow 及 outline 是纯视觉层叠，不会影响外部尺寸。

<div>
     <span class="span">木薯胖</span>
     <span class="span">樱花道</span>
</div>

<style>
.span + .span::before {
  content: "";
  font-size: 0;
  padding: 10px 3px 1px;
  margin-left: 6px;
  border-left: 1px solid grey;
}
</style>