星级显示需用::before/::after配合content:"★"或"☆"，通过多层叠加、overflow隐藏或CSS变量控制实心/空心/半星状态，并注意Firefox基线偏移、响应式缩放及无障碍支持。
用 ::before 和 ::after 控制星级显示状态
伪类本身不生成内容，必须配合 content 属性才能渲染 Unicode 星号。常见错误是只写 ::before 却忘了设 content: "★"，结果页面什么也不显示。
更关键的是：要让“半星”或“空星”可区分，得靠多层叠加或条件切换。比如用两个同位置的伪元素，一个放实心星 "★"，另一个叠在上面放空心星 "☆"，再通过 opacity 或 clip-path 截取宽度——但注意，clip-path 在旧版 Safari 里支持不稳定，建议优先用 overflow: hidden 配合父容器宽度控制。
- 实心星 Unicode 是
"★"（U+2605），空心星是"☆"（U+2606） - 别用
font-family强制指定图标字体，否则 Unicode 字符可能被替换或错位 - 伪元素默认是 inline，若需精确对齐，加
display: inline-block和vertical-align: middle
用 data-rating 属性驱动动态评分展示
硬编码五颗星太死板，实际项目中评分往往来自接口或用户输入。把数值存在 HTML 属性里，比如 ，再用 CSS 变量或 JS 注入计算逻辑——但纯 CSS 没法做小数运算，所以得提前把“3.7”拆成整数部分和小数部分存为不同属性，例如 data-full="3" data-half="1"。
如果坚持零 JS，可借助 CSS 自定义属性 + calc() 做宽度控制，但仅适用于整数分（如 4/5）：给容器设 --rating: 4，再用 width: calc(var(--rating) * 1em) 截断覆盖层。不过要注意，calc() 不能直接参与伪元素的 content 插值，那是 JS 的事。
- 避免用
content: attr(data-rating)直接输出数字——它不会自动转成星号 - 移动端点击区域小，给每颗星加
min-width: 1.2em防误触 -
data-属性值不要带单位，CSS 里统一用em或ch保持缩放一致性
解决 Firefox 下 Unicode 星号垂直偏移问题
Firefox 渲染 "★" 和 "☆" 时，默认基线（baseline）比 Chrome/Safari 高，导致几颗星排成一行时上下错位，尤其和文字混排时特别明显。这不是字体缺失，而是浏览器对符号字形度量的差异。
最稳的解法是放弃依赖默认 baseline，改用 transform: translateY() 微调，或者直接设 line-height: 1 + vertical-align: text-bottom 锚定底部。但注意 text-bottom 在 flex 容器里可能失效，此时换用 align-self: end 更可靠。
- 测试时务必在 Firefox 115+、Chrome 120+、Safari 17+ 同时打开 DevTools 查看
computed中的baseline值 - 别用
margin-top硬拉——它会破坏行内布局流，影响后续元素间距 - 如果项目用了 Tailwind，记得关闭
@layer utilities里可能覆盖vertical-align的自定义规则
响应式下保持星号比例与可读性
小屏设备上，16px 的星号容易糊成一团，尤其 OLED 屏幕子像素渲染会让 Unicode 符号边缘发虚。与其放大字体，不如用 scale() 配合 transform-origin 居中缩放，这样能保留矢量清晰度。
但要注意：scale(1.3) 会让元素占据更多空间，若父容器是 inline，可能撑开行高。解决方案是把星级容器设为 display: inline-flex，再用 align-items: center 垂直居中，同时限制最大宽度防止溢出。
- 媒体查询里慎用
font-size调整星号大小——它会连带影响所有继承文字，推荐只作用于星级组件自身 - 暗色模式下，
"★"在深背景上对比度不足，可加text-shadow: 0 0 2px rgba(0,0,0,.5)提升可辨识度 - 无障碍方面，加
aria-label="评分 4.2 分（满分 5 分）"，别只靠视觉传达
Unicode 星号看着简单，但跨浏览器对齐、小数评分映射、响应式缩放这三块最容易漏测——上线前至少在真机 Safari 和 Firefox 夜间模式下拖动屏幕缩放两次再检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
