伪元素动画失效问题：悬停input时下划线样式不生效

问题说明 #

你需要实现鼠标悬停<input>元素时，为.form_field_container添加下划线动画，但使用.form_input:hover .form_field_container::after选择器时样式完全不生效，仅当直接hover父容器.form_field_container时动画正常。

根本原因 #

CSS不支持父选择器，你写的.form_input:hover .form_field_container::after逻辑错误：这个选择器是试图在.form_input被hover时，选择它的后代元素.form_field_container的伪元素，但实际上.form_field_container是.form_input的父元素，这种反向选择在CSS中无法实现，所以样式不会被应用。

解决方案 #

方法1：使用CSS :focus-within 伪类（推荐） #

:focus-within伪类会在容器包含的任意元素获得焦点或被hover时触发，完美匹配需求。修改CSS代码如下：

.form_field_container {
  position: relative; /* 必须添加，否则伪元素会相对于文档定位 */
}

.form_field_container::after {
  content: "";
  position: absolute;
  bottom: -2px;
  height: 2px;
  background-color: red;
  left: 0;
  transition: all 0.3s; /* 将10s改为合理的0.3s，动画更自然 */
  width: 10px;
}

/* 当容器内的input被hover或聚焦时，触发下划线展开动画 */
.form_field_container:focus-within::after {
  width: 100%;
}

/* 可选：保留父容器hover时的动画效果 */
.form_field_container:hover::after {
  width: 100%;
}

方法2：使用JavaScript监听事件（兼容旧浏览器） #

如果需要兼容不支持:focus-within的旧浏览器，可以通过JS给父容器添加/移除类来触发动画：

const inputList = document.querySelectorAll('.form_input');
inputList.forEach(input => {
  const container = input.closest('.form_field_container');
  input.addEventListener('mouseenter', () => container.classList.add('hover-active'));
  input.addEventListener('mouseleave', () => container.classList.remove('hover-active'));
});

对应的CSS修改：

.form_field_container {
  position: relative;
}

.form_field_container::after {
  /* 原有样式不变 */
  transition: all 0.3s;
}

.form_field_container.hover-active::after,
.form_field_container:hover::after {
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Тв0р0бушек