为何高度相同的两个CSS伪元素视觉显示不一致？

这种视觉差异的核心原因是亚像素渲染导致的像素对齐偏差：当伪元素的定位刚好处于屏幕像素的非整数位置时，浏览器会对2px高度的线条进行模糊渲染，使得线条看起来一粗一细，不同屏幕尺寸下布局的像素位置变化，就会出现顶部或底部线条变粗的情况。

修复方案 #

通过调整伪元素的渲染逻辑，确保线条始终对齐整数像素，同时优化过渡效果，具体修改如下：

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fffa65;
}
ul{
    display: flex;
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
ul li a {
    text-decoration: none;
    padding: 10px 15px;
    font-size: 22px;
    display: block;
    color: #3d3d3d;
    position: relative;
    /* 触发硬件加速，确保元素边缘对齐整数像素 */
    transform: translateZ(0);
}
ul li a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #3d3d3d;
    transition: width .3s;
    /* 提前告知浏览器属性变化，优化渲染精度 */
    will-change: width;
}
ul li a:hover:before{
    width: 100%;
}
ul li a:after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    height: 2px;
    background-color: #3d3d3d;
    transition: width .3s;
    /* 提前告知浏览器属性变化，优化渲染精度 */
    will-change: width;
}
ul li a:hover:after{
    width: 100%;
}

修改说明 #

1. transform: translateZ(0)：触发硬件加速，强制元素的渲染边界对齐整数像素，从根源避免亚像素偏移导致的线条粗细差异。
2. will-change: width：提前告知浏览器该属性会发生动态变化，让浏览器提前优化渲染逻辑，确保线条在过渡过程中始终保持一致的像素精度。
3. 简化过渡属性：将transition: all .3s改为transition: width .3s，只针对需要变化的宽度属性做过渡，减少不必要的渲染计算，避免其他属性干扰。

如果仍有细微视觉差异，可尝试将线条height调整为1px，或给伪元素添加transform: translate3d(0,0,0)进一步强化硬件加速效果，确保线条在任何屏幕尺寸下都保持一致的视觉粗细。

内容的提问来源于stack exchange，提问作者Aviele