利用::after设置高清屏幕下的1px边框

要实现一个Header，并且有一个下边框:1px solid red;
在高清屏下，比如iphone6，我们设置的border-bottom:1px solid red;可能会显得比在pc端粗，那么如何解决呢？
html

Transformed element

css

.test::after {
  display: flex;
  border-bottom: 1px solid red;
  transform:scaleY(0.5);
  content:'';
}

效果

[email protected]

注意

css里的display: flex;和content:'';是一定要加的，不然下面的border-bottom不会显示出来。transform:scaleY(0.5);是实现效果的核心，该代码让border-bottom在y轴上压缩了0.5。

思考

我想，我单独再写一个div，然后按照上述方式设置border-bottom，最后放到Header的底部行不行呢？
我觉得，在效果上可以实现，但是如果我要挪动Header的话，这个div要一起挪动才行，而这个下边框应该视作Header的一部分，而不应该单独拿出来，所以用::after是更优解。

适配多屏幕代码

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    .test {
        &::after {
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    .test {
        &::after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}