html - 如何删除菜单分隔符的悬停效果？

Question

在我突出的 WordPress 主题中，这是我的菜单的 css。

header#top nav > ul > li > a {
    font-family: Arial,sans-serif;
    text-transform: capitalize;
    letter-spacing: .5px;
    font-size: 17px;
    line-height: 23.8px;
}

我有这个菜单分隔符“|”的代码。 我想删除菜单分隔符的悬停效果，即，当我悬停鼠标时，只有菜单应该改变颜色，而不是分隔符和菜单一起改变颜色。

media="all"
header#top nav > ul > li > a::after {
    content: "|";
    padding-right: .8em;
    padding-left: .8em;
}

编辑: 添加 :hover 代码

a:hover {
color: inherit;
}

header#top nav ul li a:hover,
header#top nav .sf-menu li.sfHover > a,
header#top nav .sf-menu li.current_page_ancestor > a,
header#top nav .sf-menu li.current-menu-item > a,
header#top nav .sf-menu li.current-menu-ancestor > a,
header#top nav .sf-menu li.current_page_item > a {
color: #27CFC3;
} 

.sf-menu li ul li a:hover, .sf-menu li ul li.sfHover > a { 
color: #27CFC3;
background-color: #272727!important;    
}

Answer 1

只需确保 ::after 规则在 :hover 规则之后声明，并指定其颜色。

示例

a{
    color:black;
    text-decoration:none;
}
a:hover{
    color:red;
}
a::after{
    color:black;
    content:"|";
    padding:0 5px;
}

<a href="#">link</a>