hover下划线动画不生效问题求助 前端新手开发疑问

问题原因 #

和normalize样式库无关，你的代码存在3个可直接导致动画不生效的问题：

• 伪元素选择器多了无效空格：.nav-links ul li a ::after里a和::after之间的空格会被CSS解析为「选中a标签内部子元素的伪元素」，但你的a标签内只有纯文本没有子元素，所以这段样式根本没有挂载到目标元素上。
• hover触发逻辑不匹配：你把::after伪元素定义在了a标签上，但hover触发的是li的::after，两者指向完全不同的元素，自然不会触发宽度变化。
• 变量未定义（大概率存在的问题）：代码里用到的--primary-400（下划线颜色）和--transition（过渡规则）是CSS自定义变量，如果你没在全局提前定义，对应的样式也会失效。

修复方案 #

你可以根据想要的下划线效果选择任意一种写法：

写法1：下划线和文字同宽（伪元素挂载在a标签上）

/* 前面的nav、img、nav-links等公共样式不需要修改 */
.nav-links ul li {
  display: inline-block;
  padding: 8px 12px;
}
.nav-links ul li a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  position: relative;
}
/* 去掉a和::after之间的空格 */
.nav-links ul li a::after {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--primary-400);
  display: block;
  margin: auto;
  transition: var(--transition);
}
/* 改为hover a的时候触发对应伪元素的宽度变化 */
.nav-links ul li a:hover::after {
  width: 100%;
}

/* 没定义自定义变量的话全局补上，参数可自行调整 */
:root {
  --primary-400: #f44336;
  --transition: 0.3s all ease;
}

写法2：下划线和li容器同宽（伪元素挂载在li标签上）

/* 前面的公共样式不需要修改 */
.nav-links ul li {
  display: inline-block;
  position: relative;
  padding: 8px 12px;
}
.nav-links ul li a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}
/* 伪元素直接挂载到li上 */
.nav-links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: var(--primary-400);
  display: block;
  margin: auto;
  transition: var(--transition);
}
/* 你原先的hover触发逻辑不需要改 */
.nav-links ul li:hover::after {
  width: 100%;
}

/* 同样需要补上全局自定义变量定义 */
:root {
  --primary-400: #f44336;
  --transition: 0.3s all ease;
}

内容的提问来源于stack exchange，提问作者ḞLØҜȈ