解决0.5px细线在手机端显示方法及oppo手机适配

愈加发现，工作中问题的解决方法在一些成熟的开源框架中都有体现。

最近的UI把设计图中分割线设计的比较细，分割线为0.5px，但是在部分安卓手机上实际显示依旧是1px，不是很美观也达不到要求。

解决方法：

实际上是利用为元素:before，:after伪元素选择器和transform缩小实现的。

效果

代码

center-highlight:before,center-highlight:after {
    content: '';
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: #a8abb0;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

问题

在实际应用中，发现oppo的一款手机中，图中的上面（:before）那条线不显示，检查以后发现，如果content为空就不显示效果，所以修改代码如下：

center-highlight:before {
    content: '1';
    color: transparent;