Pfthb

Hoping someone might be able to help me as I'm currently pulling my hair out. I've got a vertical menu in WordPress and am trying to styling to the active and hover. I've got the effect working but it's in the wrong place.

Here's the menu:

<nav class="vertical-header-menu-container"><ul id="main-menu" class="d-none d-md-block navbar-nav vertical-header-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-1106 "><a title="Home" href="https://and-it.co.uk/dan/" class="nav-link"><div class="title-content">Home</div></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-636 current_page_item nav-item menu-item-1073 active "><a title="Blog" href="https://and-it.co.uk/dan/blog/" class="nav-link"><div class="title-content">Blog</div></a></li>
</ul></nav>

And here is the CSS applied:

#main-menu .current-menu-item a::before,
#main-menu .current_page_item a::before 
content: "";
position: absolute;
left: 0;
right: 0;

#main-menu li a::before 
content: "";
position: absolute;
left: 0;
right: 100%;
background: #15bf86;
height: 3px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;

#main-menu li a:hover 
opacity: 1 !important;

#main-menu li a:hover:before 
right: 0;

#main-menu li li a:before 
bottom: 10%;

The idea is that a solid line appears below the active menu item or below the item being hovered over. It's currently above the items.

I thought I was probably using the wrong selectors but have tried changing them and no joy. I also thought that maybe I should be using 'after' instead of 'before' but again, no joy.

Would appreciate any help or direction you guys can provide.

To my understanding, this is what you expected

#main-menu li a::after 
content: "";
position: absolute;
left: 0;
right: 100%;
background: #15bf86;
height: 3px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;

#main-menu li a:hover 
opacity: 1 !important;

#main-menu li a:hover:after 
right: 0;

#main-menu li li a:after 
bottom: 10%;

<nav class="vertical-header-menu-container"><ul id="main-menu" class="d-none d-md-block navbar-nav vertical-header-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-1106 "><a title="Home" href="https://and-it.co.uk/dan/" class="nav-link"><div class="title-content">Home</div></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-636 current_page_item nav-item menu-item-1073 active "><a title="Blog" href="https://and-it.co.uk/dan/blog/" class="nav-link"><div class="title-content">Blog</div></a></li>
</ul></nav>