使用CSS伪元素实现下划线：修改bottom属性致粗细变化问题

问题原因 #

当伪元素的bottom设为-6px时，元素垂直位置刚好落在浏览器的亚像素渲染区间。浏览器为了对齐像素网格，会对线条进行拉伸或模糊处理，导致视觉上粗细发生变化；而-4px的位置刚好处于整数像素对齐位置，所以显示正常。

解决方案 #

以下几种方法均可解决该问题：

方法1：用transform: translateY()替代bottom定位 #

通过transform位移调整位置，其渲染机制能更好地处理亚像素问题：

.underline2:after {
  position: absolute;
  content: '';
  height: 2px;
  top: 100%; /* 定位到元素底部 */
  transform: translateY(6px); /* 下移6px等价于bottom: -6px */
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  background: green;
}

方法2：开启硬件加速避免亚像素模糊 #

给伪元素添加transform: translateZ(0)触发GPU渲染，让浏览器更精准处理线条渲染：

.underline2:after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -6px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  background: green;
  transform: translateZ(0); /* 开启硬件加速 */
}

方法3：调整父元素line-height #

确保父元素行高为整数像素，让伪元素定位能对齐像素网格：

p {
  line-height: 24px; /* 根据字体大小调整为合适的整数像素值 */
}

完整修正代码 #

.underline {
  text-decoration: none;
  position: relative;
}

.underline:after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -4px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  background: green;
}

.underline2 {
  text-decoration: none;
  position: relative;
}

.underline2:after {
  position: absolute;
  content: '';
  height: 2px;
  top: 100%;
  transform: translateY(6px);
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  background: green;
}

<p>This is some example text and this is a <a href="#" class="underline">flashy link</a> using pseudo styles.</p>
<p>This is some example text and this is a <a href="#" class="underline2">flashy link</a> using pseudo styles.</p>

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