CSS将鼠标悬停在元素上时如何影响:: after状态

Question

我将CSS属性设置为元素的:: after状态。将鼠标悬停在“父”元素本身上时，如何更改其:: after颜色？

.nav.navbar-nav .menu-item .nav-link::after{
content: "*";
color:#fff;
}

.nav.navbar-nav .menu-item .nav-link:hover > .nav.navbar-nav .menu-item .nav-link::after{
color:#000;
}

Answer 1

您可以结合使用:hover和::after使其起作用。请参见下面的示例。

span::after {
  content: "This is a psuedo element";
}

span:hover::after {
  color: red;
}

<span>Hover here!</span>