Стилизация при помощи CSS главного меню темы Storefront

[R0N1N]

Доброго дня,

Нужен экспертный совет по поводу кастомизации главного меню темы Storefront при помощи голого CSS

Дано: сайт на WordPress + WooCOmerce, тема Storefront
Установлен плагин Custom CSS при помощи которого уже много чего удалось поправить/подтюнить под свои сомнительные вкусы.

Что пытаюсь сделать: пытаюсь добавить эффект подчеркивания при наведении на пункт меню.
Код эффекта выглядит так:
Html

<a href="#">Link Hover Effect</a>

CSS

a {
  position: relative;
 color: inherit;
  text-decoration: none;
 line-height: 24px;
  padding-top: 10px;}
 a:before {
    content: '';
    position: absolute;
    transition: transform .5s ease;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: black; /*или любой др цвет*/
   transform:  scaleX(0);}
a:after {
    content: '';
    position: absolute;
    transition: transform .5s ease;
  }
a:hover:before {
    transform:  scaleX(1);
  backgound: efefef;
  }

Оно же в виде рабочей версии на codepen.io (надеюсь тут это не возбраняется)
https://codepen.io/0LEg_mao/pen/qBbRaPB

Теперь этот же код применительно к Worpress'у и теме 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) вижу что примерились ВСЕ стили кроме a:hover:before.
Т.е. не работает вот этот код

@media (min-width: 768px){ul.menu > li > a:hover:before {
 transform:  scaleX(1) !important;
    }
}

Вариант a:hover::before пробовал - не работает.
Имхо одно из 2х:
либо я применяю код CSS не к тому классу в принципе
либо заставить работать a:hover:before нужно как-то по другому.
Гуру CSS, поясните плииз что я делать не так