Weui uses pseudo elements to generate border, the source code is a bit incomprehensible.

  css3, question
.weui_actionsheet_cell {
 position: relative;
 padding: 10px 0;
 text-align: center;
 font-size: 18px;
 }
 .weui_actionsheet_cell:before {
 content: " ";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 1px;
 border-top: 1px solid #D9D9D9;
 color: #D9D9D9;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
 }
 
 I'd like to know why weui uses pseudo elements to generate border, and uses border:1px and height:1px at the same time.  , and then zoom 0.5 times on the y-axis.  I think it will soon be possible to directly use border. there should be no browser that does not support border.

In order to adapt to the 1px border problem of high definition screen and retina screen. Use transform scale y to solve it in one go. The advantage of using pseudo elements is that there are no more useless div tags.