CSS-评分明星

Question

我试图在CSS中创建一个不使用标签的“系统”评级，但现在我设法对其进行了伪造。但是，我有一个问题，无法在hover上应用样式。

因此，当我将鼠标悬停在一个未选中的元素上时，它的颜色应该变成紫色，但是发生的是，紫色仅应用于其后的兄弟姐妹，而不应用于被悬停的那个兄弟姐妹（应该同时应用于两个悬停和之后的那些）。但是，当我将鼠标悬停在选中的元素上时，样式将正确应用（将颜色悬停在选中的元素和该元素之后的所有元素上）。

我的CSS：

div {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

input {
  visibility:hidden;
}

input:before {
  display: flex;
  content: '★';
  font-size: 50px;
  visibility: visible;
}

input:checked,
input:checked ~ input:before {
  color: green;
}

input:hover,
input:hover ~ input:before {
  color: purple;
}

我在这里错过了一些具体的东西，因为我无法弄清楚。