Chrome与Firefox对::after伪元素渲染效果不一致问题求助

问题原因分析 #

你遇到的Chrome局部渲染异常是写的:after伪元素属性不规范触发的浏览器兼容问题，具体有三个核心诱因：

1. content: url('') 声明了空的资源引用，Chrome对空资源的加载和渲染逻辑存在缺陷，在列表项这种存在频繁重排可能的节点下，会随机出现绘制异常，只作用在部分列表项上。
2. 冗余的color: transparent属性和空url资源的渲染逻辑存在冲突，进一步放大了Chrome的渲染bug。
3. 同时设置left:0、right:0加margin: auto实现水平居中的写法，部分Chrome版本会出现布局计算的浮点精度误差，刚好落在列表项渲染边界时就会出现显示异常。

修复建议 #

按以下步骤修改伪元素代码即可解决问题：

• 把content: url('')替换为content: ''，你只需要绘制底部线条，不需要引入任何外部资源，空文本内容就可以满足需求，这是最核心的修复点。
• 删除无用的color: transparent属性，该属性对空内容的装饰性伪元素没有任何作用。
• 水平居中逻辑可以改为更兼容的left: 50%; transform: translateX(-50%)写法，避免布局精度问题。

修复后代码示例 #

&:after {
  transition: 0.5s;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  content: '';
  background: $blue;
  height: 1px;
}

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