How can I add a Pseudo element to the primary menu

Replies: 0

Hello,

I am trying to create a hover effect on my primary menu using a pseudo element “after” in the css file.

For some reason this only works on menu items with icons.

Here is the CSS selector that I am using:

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:after{
position: absolute;
left: 50%;
bottom: 0;
width: 0px;
content: “”;
background: #6594a5;
height: 4px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover:after {
width: calc(100% – 30px);
left: 15px;
}

This should be a simple green underline on the top level navigation. Looking at the generated html on Chrome, the “after” pseudo element only appears on the menu item that has an icon. Any idea about what is happening?

Thanks a lot!