CSS for Wordpress Customizr Theme Navigation Hover Animation - css

Question

I've been racking my head over this seemingly little thing for a while but I'm at my wits end. I'm running a free Customizr theme on my site.
What I am trying to achieve is to have the hover effect in the navigation bar like this demo here. As you can see, only the text of the dropdown menu items are nicely underlined.
I've found and tried to use this CSS code here:
.sliding-middle a {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle a:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle a:hover:after {
width: 100%;
background: #08c;
}
However, the result I got as you can see here, the dropdown menu items are underlined all the way across. I found that if I didn't target the "a" tags, the line would appear even more weirdly on the main menu items. But by doing so, the whole submenus inherit this effect.
If anyone has any idea what I'm missing, please help me out. Thank you in advance!

Answer 1

The example you want to achieve uses two span-nodes inside the a and only targets the first one (adding a pseudo :before) with this CSS
.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before {
background-color: #313131;
visibility: visible;
-webkit-transform: translate3d(0,0,0) scaleX(1);
-moz-transform: translate3d(0,0,0) scaleX(1);
transform: translate3d(0,0,0) scaleX(1);
}
If you add a span for the link text, you should get pretty much the same result.

Answer 2

Alright! After a few days of stressing it out and breaking my site, I've finally sort-of solved this issue.
Firstly, as #janh2 mentioned, you need to get the page to add span tags to the navigation menu labels. I've asked a different question and have updated it with the answer.
Next it's simply using the following to get the result:
.sliding-middle span {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle span:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-middle span:hover:after {
width: 100%;
background: black; /*colour you want your line to be*/
I hope this helps guys.