解决ACF自动生成HTML的单选按钮星级评分CSS悬停与选中填充问题

你可以直接替换原有CSS代码，无需修改现有HTML结构，核心通过CSS兄弟选择器配合你已经设置的flex-direction: row-reverse属性实现左侧星同步填充，修改后的完整可用CSS如下：

ul {
  list-style: none;
  padding: 0;
}
ul li {
  margin-right: 20px;
}
#listing-rating .acf-radio-list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
#listing-rating .acf-radio-list input { 
  display: none; 
}
#listing-rating .acf-radio-list label {
  visibility: hidden;
  position: relative;
  width: 1.1em;
  color: #FFD700;
  cursor: pointer;
  font-size: 25px;
}
#listing-rating .acf-radio-list label:before {
  content: "\2606";
  position: absolute;
  opacity: 1;
  visibility: visible;
}

/*  hover交互逻辑 */
/* 鼠标进入评分区域时默认所有星为空心，覆盖选中状态优先级 */
#listing-rating .acf-radio-list:hover label:before {
  content: "\2606";
}
/* 当前hover的星及其视觉左侧所有星同步填充 */
#listing-rating .acf-radio-list li:hover label:before,
#listing-rating .acf-radio-list li:hover ~ li label:before {
  content: "\2605";
}

/* 选中状态逻辑，鼠标离开后生效 */
/* 无需依赖selected类，直接用单选按钮原生checked状态更稳定 */
#listing-rating .acf-radio-list li input:checked + label:before,
#listing-rating .acf-radio-list li:has(input:checked) ~ li label:before {
  content: "\2605";
}

逻辑说明 #

• 你已经设置的flex-direction: row-reverse会让DOM顺序的li和视觉显示顺序相反，DOM中靠后的li刚好对应视觉上左侧的星级
• 兄弟选择器~可以选中当前元素之后的所有同级元素，刚好命中当前星左侧的所有星
• hover状态优先级高于选中状态，鼠标移入时优先显示悬停对应的星级，鼠标移出后自动恢复到已选中的星级

内容的提问来源于stack exchange，提问作者Huw Rowlands