div元素与::after伪元素间1px缝隙的成因及合规解决方案

问题复现代码 #

CSS：

body,
html {
  font-family: sans-serif;
}

.wrapper {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  position: relative;
  background-color: #156082;
  color: white;
  padding: 5px;
  width: max-content;
}

.arrow::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-left: 30px solid #156082;
  top: -15px;
  right: -60px;
}

HTML：

<div class="wrapper">
  <div class="arrow">
    <strong>This is a label</strong>
  </div>
</div>

问题原因 #

这个1px缝隙确实是浏览器亚像素渲染的舍入误差导致的。当页面缩放、或者flex居中这类布局计算产生非整数像素的位置/宽度值时，浏览器会对元素的渲染位置进行插值或像素舍入处理，原本理论上应该完全贴合的父元素和伪元素，就会出现细微的偏移缝隙，且这种现象会随缩放级别变化而消失或出现。

合理解决方案 #

放弃通过right属性手动计算定位的方式，改用transform来实现精确对齐——因为transform的计算基于GPU的像素网格，不会产生布局层面的像素舍入误差。修改伪元素的CSS如下：

.arrow::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-left: 30px solid #156082;
  top: 50%;
  /* 用transform实现垂直居中+精确右对齐 */
  transform: translate(100%, -50%);
  right: auto; /* 移除原有的right定位 */
}

这样修改后，伪元素会精准对齐到.arrow元素的右侧边缘，无论页面缩放级别如何，都不会出现缝隙；同时top:50% + transform: translateY(-50%)也能更可靠地实现伪元素的垂直居中，避免原代码中top:-15px可能出现的偏移问题。

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