Применение условия: hover: before для главного меню в теме Wordpress Storefront

Question

Всем хорош!

Я пытаюсь применить эффекты наведения для главного меню на сайте, запущенном в теме Wordpress + WooCommece + Storefront. Эффект наведения довольно прост, но включает условие a: hover: before . Рабочий код можно проверить здесь https://codepen.io/0LEg_mao/pen/qBbRaPB

Тот же код, что и для темы Storefront

    @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), что все * Код 1020 * применяется к главному меню, КРОМЕ a: hover: before condition. Как сделать, чтобы условие a: hover: before работало для главного меню?

PS размещение здесь ссылки на мой сайт может быть более полезным для иллюстрации того, что я пытаюсь сделать, но оно мигрирует быть против правил

Answer 1

Наконец я заставил это работать. На всякий случай, если кто-то будет использовать ту же комбинацию темы и эффекта наведения: добавьте следующее правило

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