css笔记--web端小于1px设计的处理方法

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>last-child</title>
    <style>

        body{
            color:#333;
        }
        li.test-last-child:after{
            display: block;
            content: '';
            height: 10px;
            background-color: #0000ed;
            transform:scaleY(0.3);
        }
        li.test-last-child:last-child:after{
            display: none;
        }
    </style>
</head>
<body>
<ul>
    <li class="test-last-child">321312</li>
    <li class="test-last-child">31313</li>
    <li class="test-last-child">3131</li>
    <li class="test-last-child">1413</li>
    <li class="test-last-child">141321</li>
    <li class="test-last-child">1421</li>
</ul>

</body>
</html>

伪元素after的高度为10px时chrome效果图