Html WordPress垂直菜单悬停效果定位

希望有人能帮助我，因为我现在正在拔头发。我在WordPress中有一个垂直菜单，我正在尝试将样式设置为活动和悬停。我的效果起作用了，但放错地方了

这是菜单：

<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>

其思想是在活动菜单项下方或悬停的项目下方显示一条实线。它目前位于项目上方

我认为我可能使用了错误的选择器，但我尝试过改变它们，但没有任何乐趣。我还想也许我应该用“之后”而不是“之前”，但同样，没有乐趣

---

非常感谢你们提供的任何帮助或指导。

据我所知，这正是你们所期望的

#主菜单li a:：after{
内容：“；
位置：绝对位置；
左：0；
右：100%；
背景#15bf86；
高度：3倍；
-webkit转换属性：右；
过渡财产：权利；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
#主菜单li a：悬停{
不透明度：1！重要；
}
#主菜单li a：悬停：之后{
右：0；
}
#主菜单李莉a：之后{
底部：10%；
}

运行代码片段，它的工作原理与我预期的完全一致。但是，在我的实际站点上使用CSS会产生与我的代码相同的结果。。。这些行显示在菜单项上方，而不是下方。我现在的猜测是，这可能与网站上的其他内容相冲突？因此，如果有可能提供网站链接，我将尝试找出它。

#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%;
}