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

Question

Greating everyone!

I'm trying to apply hover effects for main menu on a site run on Wordpress + WooCommece + Storefront theme. Hover effect is quite simple but includes a:hover:before condition. Working code can be checked here https://codepen.io/0LEg_mao/pen/qBbRaPB

Same code applied to Storefront theme

    @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);
    }
}

Result: I see at browser development tools (F12) that all CSS code is applied to main menu EXCEPT a:hover:before condition. How to make a:hover:before condition working for main menu?

P.S. posting here link to my site might be more helpful in illustrating of what i'm trying to do but it migth be against rules

Answer 1

Finally I made it work. Just in case if someone will be using the same combination of theme and hover effect: Add the following rule

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