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

Question

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

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

.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>

Answer 1

检查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>