如何使用CSS将现有评分系统的*符号替换为自定义指定评分符号

核心需求：开发网页评分系统时，需要使用与*形态相近、但并非标准星号本身的自定义符号作为评分标记。当前已实现的评分逻辑是通过CSS伪元素写入标准*作为评分符号，需要调整为适配自定义符号的配置方式。

现有已落地的基础代码 #

CSS 样式 #

.rating-result {
    width: 265px;
    margin: 0 auto;
}
.rating-result span {
    padding: 0;
    font-size: 52px;
    margin: 0 3px;
    line-height: 1;
    color: lightgrey;
    text-shadow: 1px 1px #bbb;
}
.rating-result > span:before {
    content: '*'; /* 原有固定写入标准星号的位置 */
}
.rating-result > span.active {
    text-shadow: 1px 1px #c60;
}

HTML 结构 #

<div class="rating-result">
    <span class="active"></span>    
    <span class="active"></span>    
    <span class="active"></span>  
    <span></span>    
    <span></span>
</div>

自定义符号的配置实现方式 #

• Unicode字符替换（轻量化首选）：如果目标自定义符号有对应的通用Unicode编码（比如不同装饰形态的星标、特殊星形字符），仅需要直接替换伪元素content属性中写死的*值，填入对应符号的Unicode编码即可。整个过程不需要改动原有HTML结构和其他样式规则，替换后即可正常渲染目标符号，无额外资源加载成本。
• 自定义Web字体方案：如果目标符号是专属设计的特殊形态、无对应通用Unicode编码，可以将设计好的图标封装为矢量Web字体，通过CSS的@font-face规则引入自定义字体文件，再将伪元素的content值替换为对应字体图标的专属编码即可。该方案实现的符号为矢量格式，任意缩放不会出现模糊问题，适合对符号精度要求高的场景。
• 内联SVG方案：将目标符号的矢量路径整理为内联SVG代码，通过base64编码后直接填入伪元素的content值即可。该方案不依赖外部字体文件，可100%匹配设计稿的符号外观，后续调整颜色、阴影等样式效果也更灵活。
• 背景图适配方案：如果已经有设计好的符号静态资源，可以清空伪元素的content值，给对应评分span元素配置背景图，通过调整背景尺寸、定位对齐规则，实现自定义符号的展示，适合快速适配已有静态资源的场景。

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