改变颜色：悬停后

Question

我的链接后面有一个小的下拉箭头，使用:after添加。

我想要做的是当我将鼠标悬停在链接上时更改箭头的颜色，这可能吗？

这是我正在尝试但不起作用的地方：

.detail__changer {
    color: #333;
    cursor: pointer;
    text-decoration: underline;
    font-size: 33px;
}
.detail__changer:after {
    color: #333;
    content: ' ▾';
}
~ .detail__changer:hover:after {
    color: red !important;
}

Here's a fiddle

此外，I have seen this question, my question is not the same

Answer 1

删除波浪号

.detail__changer {
	color: #333;
	cursor: pointer;
	text-decoration: underline;
    font-size: 33px;
}
.detail__changer:after {
	color: #333;
	content: ' ▾';
}
.detail__changer:hover:after {
	color: red !important;
}

<div class="detail__changer">Hover over me</div>