Как удалить эффект наведения разделителей меню?

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

Edit: Добавление: парить код

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 правил и указать его color.

Пример

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

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

Answer 2

моя проблема решена. Я просто добавил цвет свойства в моем меню разделитель кода CSS:

media="all" 
header#top nav > ul > li > a::after 
{ 
content: "|"; 
padding-right: .8em; 
padding-left: .8em; 
color: #008daa!important; //I inserted this line. It works perfect now! 
} 

Color свойство отменяет весь изменяющиеся зависания свойства цвета. Благодарим вас за поддержку.