为 Wordpress Storefront 主题的主菜单应用 a:hover:before 条件

Question

大家好！

我正在尝试在 Wordpress + WooCommece + Storefront 主题的站点运行上为主菜单应用悬停效果。悬停效果非常简单，但包含 a:hover:before 条件。可以在此处检查工作代码 https://codepen.io/0LEg_mao/pen/qBbRaPB

应用于店面主题的相同代码

    @media (min-width: 768px){ul.menu > li > a {
      position: relative;
     color: inherit;
      text-decoration: none;
     line-height: 24px;

        }
    }

    @media (min-width: 768px){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);
        }
    }

    @media (min-width: 768px){ul.menu > li > a:after {
        content: '';
        position: absolute;
        transition: transform .5s ease;
        }
    }
@media (min-width: 768px){ul.menu > li > a:hover:before {
 transform:  scaleX(1);
    }
}

结果：我在浏览器开发工具 (F12) 中看到所有 CSS 代码都应用于主菜单，除了 a:hover:before 条件。如何使 a:hover:before 条件适用于主菜单？

P.S。在此处 link 发布到我的网站可能更有助于说明我正在尝试做的事情，但它可能违反规则

Answer 1

终于成功了。以防万一有人使用相同的主题和悬停效果组合：添加以下规则

@media (min-width: 768px){.main-navigation ul li a::before {     
display: block !important;   }}

为 Wordpress Storefront 主题的主菜单应用 a:hover:before 条件

Applying a:hover:before condition for main menu on Wordpress Storefront theme

css

wordpress

menu

storefront