React模块化样式中:hover::before不生效，求解决方案

你的问题大概率不是CSS Modules的哈希机制导致的，伪类和伪元素在模块化样式中本身是可以正常工作的，给你几个具体的排查和修复方向：

• 给父元素添加相对定位
  你的伪元素使用了position: absolute，如果.listItem没有设置position: relative，伪元素会相对于最近的定位祖先（甚至视口）定位，可能跑到了你看不到的区域，hover时的宽度变化自然无法感知。修改样式：

.listItem {
  position: relative; /* 新增这行，让伪元素相对于当前元素定位 */
}

.listItem::before {
    content: '';
    width: 0px;
    height: 3px;
    box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.25);
    background-color: #FFFFFF;
    position: absolute;
    bottom: -5px;
    left: 0;
    transition: width .3s ease;
} 

.listItem:hover::before {
  width: 45px;
}

• 确认JSX中类名引用正确
  必须通过模块化导入的styles对象来使用类名，不能直接写字符串类名，否则模块化样式不会生效：

import styles from './Header.module.scss';

// 正确写法
<li className={styles.listItem}>菜单选项</li>

// 错误写法（模块化样式不会作用到这个元素上）
<li className="listItem">菜单选项</li>

• 排查样式优先级冲突
  打开浏览器开发者工具，查看伪元素的样式面板，检查width属性是否被其他更高优先级的选择器（比如嵌套更深的类、ID选择器）或!important标记覆盖了。如果有冲突，需要调整选择器优先级或移除强制覆盖的样式。

• 检查伪元素是否被遮挡
  如果伪元素的z-index过低，可能被父元素或其他页面元素挡住，hover时的变化无法显示。可以给伪元素添加z-index值尝试：

.listItem::before {
    /* 其他样式不变 */
    z-index: 1;
}

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