如何禁用页面打开或刷新时自动触发的CSS hover下划线动画

问题根因 #

你当前的实现给.box::after的默认状态绑定了out动画，页面加载CSS解析完成后就会自动执行该动画，这是页面刷新时触发不必要收回动画的核心原因。

纯CSS修复方案 #

无需JavaScript，改用transition替代animation即可实现需求。transition仅在元素属性发生变化时才会触发过渡效果，天然不会在页面初始化加载时自动执行。

修改后完整CSS代码 #

body {
  background-color: black;
}

.box {
  width: 100px;
  height: 100px;
  margin: 40px auto;
  background-color: #f44336;
  position: relative;
}

.box::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 100%;
  height: 3px;
  background-color: #fff;
  /* 默认状态下划线隐藏 */
  transform: scaleX(0);
  /* 移出动画：从左到右收回，变换原点设为右侧 */
  transform-origin: right center;
  /* 统一设置过渡效果，时长和原方案400ms保持一致 */
  transition: transform 400ms linear;
}

.box:hover::after {
  transform: scaleX(1);
  /* 移入动画：从左到右滑出，变换原点设为左侧 */
  transform-origin: left center;
}

效果验证 #

• 鼠标hover盒子时：下划线从左到右平滑滑出
• 鼠标移出盒子时：下划线从左到右平滑收回
• 页面刷新/首次打开时：无任何多余的动画触发，下划线默认隐藏，完全符合需求

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