在::after上更改悬停颜色

Question

我无法更改::after上悬停的颜色。
我能够改变::after的颜色从黑色到红色没有悬停。

::after实际上是从以前的CSS编码转换的箭头。它应该指向<span>Issues</span>展开下拉菜单。

.sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #DFEEFF;
  border-top-color: rgba(255, 255, 255, 0.5);
}
/*top menu issues*/
.nav-menu-item-357 .sf-with-ul span{
  color:#E81717;
}
.nav-menu-item-357 .main-menu-link.sf-with-ul::after {
  border-top-color:#E81717;
}
/*THIS 3rd LINE DOES NOT WORK:*/
.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
  border-top-color:#E81717;
}

<ul style="position: relative;">
    <li class="nav-menu-item-357 main-menu-item  menu-item-even menu-item-depth-0 new_dropdown_style menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#" class="menu-link main-menu-link sf-with-ul">    
            <span>Issues</span>
        </a>
    </li>
</ul>

Answer 1

看起来你的代码工作了(第三行)。

这里是小提琴(我添加了一些类来显示您的菜单元素):http://jsfiddle.net/kost/4k0ebxnz/

.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
    border-top-color:#E81717;
}

Answer 2

考虑以下

<span class="span">test</span>

要在测试后在span上添加一个箭头，您可以在css中执行以下操作:

span:after {
    content: '->'
}

现在要更改悬停时箭头的颜色，必须执行以下操作

span:hover:after {
    color:red;
}

working fiddle here

jsfiddle链接