CSS :: before元素不应触发父元素的：hover功能

Question

在wordpress网站上工作时，我只能将CSS类添加到手册中以对其进行自定义。我的目标是在菜单项之前添加一些文本，效果很好：

#nav-menu-container .myheader-heading::before {
  font-size: 11px;
  display: block;
  color: #333;
  margin-left: 5px;
}
#nav-menu-container .myheader-heading-text::before {
  content: "text";
}

以下是主要元素的HTML：

<li id="menu-item-213" class="myheader-heading myheader-heading-text menu-item menu-item-type-post_type menu-item-object-page menu-item-213"><a href="#">Some Nav Link</a></li>

看起来不错，但是每次我将鼠标悬停在上面用::before用上述CSS定义的文本上时，主要元素get都会突出显示，这很烦人。如何避免这种行为，以免主元素之前的文本不会影响主元素的悬停功能？

编辑

我还尝试禁用或恢复#nav-menu-container .myheader-heading:hover::before中的任何悬停功能，但它仅影响::before元素，而不影响仍悬停的主要元素。