css利用伪元素做竖线分隔，为什么会出现竖线粗细不一样的情况啊

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

.recom-bd ul li {
    position: relative;
    width: 25%;
    height: 164px;
}

.recom-bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    height: 144px;
    width: 1px;
    background-color: #ddd;
}

.recom-bd ul li img {
    width: 100%;
    height: 100%;
}

 <ul>
                <li class="fl"><a href="#"><img src="upload/recom1.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom2_04.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom3_06.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom4_08.png" alt=""></a></li>
            </ul>

检查a或者img是否加了边框什么，用题主代码测试改红色变是没问题的

<div class="recom-bd"> <ul>
                <li class="fl"><a href="#"><img src="upload/recom1.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom2_04.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom3_06.png" alt=""></a></li>
                <li class="fl"><a href="#"><img src="upload/recom4_08.png" alt=""></a></li>
            </ul>
</div>
<style>
.recom-bd ul li {
    position: relative;
    width: 25%;
    height: 164px;
float:left
}
 
.recom-bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    height: 144px;
    width: 1px;
    background-color: #f00;
}
 
.recom-bd ul li img {
    width: 100%;
    height: 100%;
}
</style>

检查下你的浏览器或者windows桌面是不是缩放放大或缩小了

把浏览器和windows桌面缩放设置回100%看看

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

有的只是浏览器显示问题 我之前也是这样 合并边框 也是有大小不一 设置不同的浏览器缩放 效果也不一样 我觉得是浏览器显示问题