如何修复滑动伪类样式问题？解决边角重叠与间隙问题

问题1：伪类滑动时左侧边角与元素初始边框重叠 #

核心原因是伪类缩放时的尺寸与元素边框区域不匹配，导致边角视觉重叠。可以通过以下两种方式修复：

方案一：扩展伪类尺寸覆盖边框区域 #

调整伪类的位置，让它向外扩展至边框宽度，确保缩放过程中完全覆盖边框内侧，避免重叠：

.item {
  width: 400px;
  height: 100px; /* 修复原代码的语法错误：height属性缺少冒号 */
  border: 2px solid black;
  border-radius: 15px;
  position: relative;
  box-sizing: border-box; /* 统一盒模型计算规则 */
}

.item::before {
  content: "";
  inset: -2px; /* 向外扩展2px，匹配边框宽度 */
  border-radius: 15px;
  position: absolute;
  background: red;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 3s;
}

.item:hover::before {
  transform: scaleX(1);
}

方案二：改用宽度过渡替代缩放 #

放弃scaleX，直接通过修改伪类宽度实现滑动效果，从根源避免缩放带来的边角变形问题：

.item {
  width: 400px;
  height: 100px;
  border: 2px solid black;
  border-radius: 15px;
  position: relative;
  box-sizing: border-box;
}

.item::before {
  content: "";
  left: -2px;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-radius: 15px;
  position: absolute;
  background: red;
  z-index: -1;
  transition: width 3s;
}

.item:hover::before {
  width: calc(100% + 4px); /* 计算包含左右边框的总宽度 */
}

问题2：过渡完成后伪类与元素边框的微小间隙 #

这个间隙多由浏览器border-radius渲染精度误差或尺寸匹配偏差导致，可通过以下方式解决：

• 给伪类的border-radius设置比元素大1px的值，抵消渲染偏差：border-radius: 16px
• 确保伪类的扩展尺寸精确匹配边框宽度，避免小数计算误差
• 若使用方案二的宽度过渡方式，精确计算宽度值可直接消除间隙

结合修复的最终示例：

.item {
  width: 400px;
  height: 100px;
  border: 2px solid black;
  border-radius: 15px;
  position: relative;
  box-sizing: border-box;
}

.item::before {
  content: "";
  inset: -2px;
  border-radius: 16px; /* 比元素大1px，解决渲染间隙 */
  position: absolute;
  background: red;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 3s;
}

.item:hover::before {
  transform: scaleX(1);
}

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