手机页面中如何创建1px宽度的间隔线

这个问题自我从一开始编写页面的时候就困扰着，一直没找到解决方法。

1px是每个显示器能显示的最小单位，但由于在手机上显示的时候，需要添加 ​​

​meta viewport​

​ 相关属性，导致页面最小单位不再是1px，大约在2px左右。

前些天在看微信css的时候，发现他们已经可以做出这种效果了。

研究了下，方法如下。

span{
    position: relative; //因为::after内需要absolute
    &::after{
      position: absolute;
      bottom: 0;
      left: 55px;
      right: 0;
      content: '';
      border-bottom: 1px solid #cccccc;
      background-color: #cccccc;
      transform-origin: 0 100%;  //最重要的是这两个
      transform: scaleY(.5);     //最重要的是这两个，设置纵向缩放50%
    }
  }      

演示效果如下（看不清的右击在新窗口中打开图片）：

之前是这样的（非1px）

之后是这样的（1px），会有种很精致的感觉