css - 更改 :after on hover 的颜色

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>