星级评分组件网页不显示求助（CodePen中可正常展示）

看起来你遇到的问题大概率是CSS预处理器兼容性导致的，咱们一步步拆解解决：

问题根源 #

你在CodePen里写的CSS用了Sass的嵌套语法（比如&:after），但CodePen默认会自动帮你把Sass编译成原生CSS，所以能正常显示；但部署到普通网页时，浏览器只识别原生CSS，嵌套语法不会被解析，导致.stars:after的样式根本没生效，星星显示异常，同时也没处理溢出问题，所以star-wrap外部区域没被隐藏。

修正方案 #

把Sass语法转换成原生CSS，同时完善星星的显示逻辑，确保评分效果正常：

修正后的HTML（保持不变） #

<div class="star-wrap">
  <span class="stars">
    <span style="width: 80%" />
  </span>
</div>

修正后的CSS（原生CSS，无需预编译） #

.star-wrap {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.stars {
  display: inline-block;
  font-size: 45px;
  position: relative;
  color: #476b8c;
  overflow: hidden; /* 关键：隐藏超出容器的内容，解决外部区域未隐藏的问题 */
}
.stars:after {
  content: "☆☆☆☆☆"; /* 只保留5颗空心星，去掉多余的... */
}
.stars > span {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffd700; /* 填充的实心星星颜色，比如金色 */
  overflow: hidden;
  width: 80%; /* 控制评分比例，80%对应4颗星 */
}
.stars > span:after {
  content: "★★★★★"; /* 用实心星作为填充内容 */
}

关键修改说明 #

1. 移除Sass嵌套语法：把&:after改成.stars:after，让浏览器能直接识别伪元素样式
2. 清理content内容：去掉"☆☆☆☆☆..."里的...，避免多余字符干扰星星显示
3. 添加溢出隐藏：给.stars加上overflow: hidden，确保内部的彩色星星不会超出容器范围，解决你说的star-wrap外部区域未隐藏的问题
4. 完善填充逻辑：内部的span用绝对定位覆盖在空心星上，通过width控制显示多少颗实心星，实现精准的评分效果

以后如果在本地用Sass语法写样式，记得用工具（比如Node-sass、Dart Sass）编译成原生CSS再部署到网页哦～

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