在CSS中使用：after悬停

我的HTML如下所示

<li class="category">Hair</li>

.category:hover:after {
    position: absolute;
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    right: 18px;
    top: 15px;
    font-size: 18px;
    color: #ff0052;
}

当我将鼠标悬停在头发上时，颜色不会变为ff0052

.category{
位置：相对位置；
光标：指针；
}
.类别：悬停{
颜色：红色！重要；
}
.类别：悬停：：之后{
内容：“++”；
位置：绝对位置；
字号：900；
顶部：15px；
字号：18px；
颜色：红色！重要；
}

---

头发

移除

：之后

也不需要

位置：绝对移除
右侧：18px。您想在悬停时更改
：后的颜色，对吗？是的，正确。同样，也可以使用
：after
而不是
：after
，请参见此处：谢谢@Abdulah Al-Noor。但是我还需要改变头发的颜色。谢谢。谢谢@Abdullah Al-Noor。我想避免这一部分
。类别：hover{color:red！important；}
@abuabu我不明白。。你到底想要什么？其实我以前也喜欢你。但是我想避免
。category:hover{color:red！important；}
。没有这一部分，有可能获得相同的功能吗？谢谢。
：：在
和
li之后。类别
是两个独立的元素。。。我认为这是不可能的。。。