字体颜色不会使用:after:hover更改

是因为:after伪元素是在目标元素的内容之后插入的，而:hover伪类是在鼠标悬停时触发的。由于伪元素本身并没有与用户交互的能力，所以无法通过:hover伪类来改变伪元素的样式。

然而，我们可以通过其他方式来改变字体颜色。以下是一些常用的方法：

1. 使用CSS的:hover伪类直接改变目标元素的字体颜色：

.target-element:hover {
  color: red;
}

这样当鼠标悬停在目标元素上时，字体颜色会变为红色。

1. 使用JavaScript来实现动态改变字体颜色的效果：

<div class="target-element" onmouseover="changeColor(this)" onmouseout="resetColor(this)">Hover me</div>

<script>
function changeColor(element) {
  element.style.color = "red";
}

function resetColor(element) {
  element.style.color = "";
}
</script>

这里通过给目标元素添加onmouseover和onmouseout事件来触发JavaScript函数，从而实现鼠标悬停时改变字体颜色的效果。

需要注意的是，以上方法都是针对目标元素本身的字体颜色进行改变，并不涉及到伪元素的样式。如果需要改变伪元素的样式，可以考虑使用其他CSS属性或JavaScript技术来实现。