Html 更改悬停时列表项的项目符号/编号颜色

我正在尝试更改悬停时列表项的颜色，包括项目符号/编号和文本。我在Google Chrome中遇到了一个问题，只有文本在改变颜色。我错过什么了吗

HTML:

JSFiddle：

---

您可以在

：之前添加项目符号，然后应用任何有效的CSS：


li{
列表样式：无；
}
李：以前{
内容：“•”；
颜色：黑色；
}
ol{
计数器重置：项目；
}
欧利{
显示：块；
}
奥利：以前{
内容：柜台（项目）“.”；
反增量：项目；
颜色：黑色；
}
李：悬停：之前{
颜色：红色；
}

盘旋我

盘旋我
没有直接的方法可以做到这一点。您需要实现这样的解决方案


ul{
列表样式：无；
}
李：以前{
内容：“\2022”；
右边距：5px；
字体大小：20px；
字体大小：粗体；
}
ulli：悬停{
颜色：红色；
}
ul li：悬停：之前{
颜色：红色；
}

测试1
测试2
您可以在css中执行此操作。通过添加
li:before
，您可以同时更改项目符号和文本颜色

li {
  list-style: none;
}
li:before {
  content: "• ";
  color: black;
}
li:hover:before {
  color: red;
}
li:hover {
  color: red;
}

重复：@Topr对无序列表有效，但有序列表如何？认为这是一个重复的问题，看看这个问题。我更新了我的问题，使之更清楚。我需要更改有序和无序列表的颜色。
ol li:hover,
ul li:hover {
    color: red;
}

li {
  list-style: none;
}
li:before {
  content: "• ";
  color: black;
}
li:hover:before {
  color: red;
}
li:hover {
  color: red;
}