1、第一种直接在文字中间插入短线这个字符就可以了，这个实现的方法可谓是“简单、直接、高效”，但是缺点是可控性差，甚至可以说是简直无法控制！
2、第二种方法就是我们可以使用伪元素方法，其实跟直接插入差不多，具体的代码实现如下。我们看到效果不是很好。
3、方法三我们可以利用border和padding来控制，使用padding时可以调控竖线的高度。和一种不同的是这种方式的可控性高，但是会多出来一个空白节点。
4、第四种方法就是利用背景图片，可控性较高，因为图标需要制作，但是相应的就会有一个缺点，要切图，比较繁琐。
5、第五种，代码如下图所示：缺点是高度不能小于文字的高度，如果需要的话也能够实现，就是有些麻烦。
6、第六种也可以直接在中间放div，和用span类似，width设置为0，height根据需要豹肉钕舞设置，再给个border-left,宽度根据需求设置值。位置可以用定位随意控制。
