javascript - 悬停时在CSS写的文本框中更改特定字符的颜色

我试图改变2个非常具体的字符的颜色，当它停留在一个文本框，内容纯粹是在CSS。
因为它不是用HTML而是CSS编写的，所以我不能专门添加样式标签来完成这项工作，我迷失了方向。
我想要的是#代码学生：悬停：在代码之后使“”在悬停时变为红色。

#CODESTUDENT:after {
  content: "CODE STUDENT";
}

#CODESTUDENT:hover:after {
  content: "<CODE STUDENT>";
}

<li id="CODESTUDENT"></li>

我试过添加颜色属性等，但无法修复。

最佳答案

如果您可以将文本添加到HTML（取决于您的需求），请在HTML的标记中添加“代码学员”，并使用以下样式：

#CODESTUDENT:hover::before {
  content: "<";
  color:red;
}

#CODESTUDENT{
  opacity:0;
}

#CODESTUDENT:hover{
  opacity:1;
}

#CODESTUDENT:hover:after {
  content: ">";
  color: red;
}

你可以随时删除代码学生的样式，它将保留在网站上。
https://codepen.io/ptr11dev/pen/dEOdxQ