中间文字，两边横线（纯css实现的哦）

最近在做项目的时候，遇到了一个中间文字，两边横线的布局，如下图：

第一种：

代码如下：

    
    
    


    

        
        
到底了
    

这里使用了背景色和透明度，细心的人可能会发现，body设置的背景色刚好是‘到底了’的文字的背景色，同时也用了行内块、透明度以及相对定位来实现了的噢。

第二种：

后来，在网上找到了不同的方法，代码如下：

    
    
    


    

        
        产品清单
        
    

在css样式中原本是使用 vertical-align: middle，然后就发现跟效果有一点点区别，横线没有完全在文字的中间，查找 vertical-align 的属性就会发现有length 和 % 两个属性:

第三种：

使用css伪类来实现

    
    
    



    
暂无数据