WordPress Storefront主题主菜单a:hover:before样式不生效求助

我之前折腾Storefront主题菜单样式时，也碰到过一模一样的情况——CSS代码明明都加载了，但hover时的下划线效果就是没反应。大概率是选择器权重不够被主题样式覆盖，或是元素触发区域/层级出了问题，给你几个实用的排查和解决方法：

1. 提升选择器权重，覆盖主题默认样式 #

Storefront的主导航有专属父类.storefront-primary-navigation，你原来的选择器ul.menu > li > a:hover:before权重太低，很容易被主题自带样式压过。改成更具体的选择器试试：

@media (min-width: 768px){
  .storefront-primary-navigation ul.menu > li > a { 
    position: relative; 
    color: inherit; 
    text-decoration: none; 
    line-height: 24px;
    display: block; /* 让a标签占满整个菜单项的hover区域 */
  } 
  
  .storefront-primary-navigation ul.menu > li > a:before { 
    content: ''; 
    position: absolute; 
    transition: transform .5s ease; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 2px; 
    background: black; 
    transform: scaleX(0);
    z-index: 10; /* 确保伪元素不会被菜单其他元素遮挡 */
  } 
  
  .storefront-primary-navigation ul.menu > li > a:hover:before { 
    transform: scaleX(1); 
  }
}

2. 检查hover触发区域 #

有些时候菜单的<li>元素加了padding，但<a>标签是行内元素，导致hover只有文字区域能触发效果。给<a>标签加上display: block，能让它占满整个<li>的空间，hover更灵敏。

3. 验证伪元素是否被遮挡 #

修改权重后还是没效果的话，打开浏览器开发者工具（F12）：

• 选中菜单的<a>标签，手动触发:hover状态，查看::before的样式
• 如果transform: scaleX(1)被划掉了，说明还是被更高权重的样式覆盖，可以继续叠加选择器（比如加body前缀：body .storefront-primary-navigation ul.menu > li > a:hover:before）
• 如果样式生效但看不到下划线，检查z-index是否足够，或是bottom值是否被主题的菜单border-bottom挡住

4. 强制清除浏览器缓存 #

有时候浏览器会缓存旧的CSS文件，按Ctrl + F5（Windows）或Cmd + Shift + R（Mac）强制刷新页面，确保新样式生效。

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