如何仅为星星图标设置一半的填充颜色？附参考图与代码示例

基于你现有用文本符号★做图标的代码结构，不需要替换成外部图标库，纯CSS就能实现精准控制的半填充效果，核心是双层元素叠放+宽度裁剪的逻辑。

实现步骤 #

• 给基础星星元素设置相对定位，统一字体相关属性，作为未填充状态的底层层
• 用伪元素生成和底层完全一致的同个星星符号，叠在同一位置
• 给叠在上层的填充层设置固定宽度、超出部分隐藏，通过宽度值直接控制填充比例

可直接复用的代码 #

1. 基础样式

.star {
  position: relative;
  /* 统一继承字体属性，保证上下两层星星完全对齐，避免错位 */
  font-family: system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
  color: #d1d1d1; /* 未填充部分的默认灰色 */
}
/* 半填充状态类名，给需要半满的星星绑定这个类即可 */
.star--half::after {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%; /* 填充比例控制点：50%就是半星，想做7成填充就改成70% */
  height: 100%;
  overflow: hidden;
  color: #f5a623; /* 填充部分的高亮色 */
}
/* 全填充状态类名，按需添加 */
.star--full::after {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #f5a623;
}

2. 组件结构完全兼容你现有的写法

<!-- 未填充星星 -->
<span className="star"></span>
<!-- 半填充星星 -->
<span className="star star--half"></span>
<!-- 全填充星星 -->
<span className="star star--full"></span>

常见踩坑点 #

• 上下两层星星的字体、字号、字重必须完全统一，否则会出现边缘偏移、填充位置不准的问题，所有字体相关属性直接写在.star类上让伪元素继承即可
• 这个裁剪方案支持任意精度的填充比例，不管是四分之一星还是八成填充，只要改伪元素的width值就可以，不需要调整DOM结构
• 因为用了CSS原生定位和裁剪，没有额外资源加载，所有现代浏览器都能正常显示

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