对 Wordpress 店面主题上的主菜单应用 a:hover:before 条件

Question

大家好！

我正在尝试在 Wordpress + WooCommece + 店面主题上运行的网站上为主菜单应用悬停效果。 悬停效果非常简单，但包括a：悬停：之前条件。 可以在此处检查工作代码 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条件适用于主菜单？

附言在这里发布指向我网站的链接可能更有助于说明我正在尝试做什么，但它可能违反规则

Answer 1

最后我让它工作了。以防万一有人将使用相同的主题和悬停效果组合： 添加以下规则

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