• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

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

R0N1N

Новичок
Доброго дня,

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

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

Что пытаюсь сделать: пытаюсь добавить эффект подчеркивания при наведении на пункт меню.
Код эффекта выглядит так:
Html
HTML:
<a href="#">Link Hover Effect</a>
CSS
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
CSS:
@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.
Т.е. не работает вот этот код
CSS:
@media (min-width: 768px){ul.menu > li > a:hover:before {
 transform:  scaleX(1) !important;
    }
}
Вариант a:hover::before пробовал - не работает.
Имхо одно из 2х:
либо я применяю код CSS не к тому классу в принципе
либо заставить работать a:hover:before нужно как-то по другому.
Гуру CSS, поясните плииз что я делать не так :)
 
Сверху Снизу