CSS中的伪元素

Question

我目前正在研究游戏的角色数据库。 字符数据和有关所有字符的信息均用JavaScript编写，而前端设计则用CSS编写。 每个角色都有某些属性（攻击，生命值，恢复等）。 我关注的是他们的星星 。 他们的星标指的是他们的稀有性（1星=极为普通； 6星=极罕见）。 该游戏最近引入了一种超级进化技术，其中6星角色可以变成6星+（读作6星以上）角色。 这是我的问题所在。 我知道JavaScript可以正常工作，而且我的问题出在CSS中。 请查看下面的代码。

这是字符之一的JavaScript：

[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6_plus", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],

与之配套的CSS：

.stars-6_plus:before { color: #00bfff; content: '\2605\2605\2605\2605\2605\2605\002B'; }

理想情况下，我将JavaScript改为6+，而不是6_plus和CSS，但是我不知道该怎么做。 我不确定是否有一种方法可以按照我的期望进行。 有人告诉我，也许我可以设置条件，以便在读取6_plus时显示6+，但我不确定是否可行。 我真的很感谢您的帮助。

提前致谢。

PS如果您想亲自检查一下，这里是数据库的链接：

http://optc-db.github.io/characters/#/search/

Answer 1

这应该适用于您的课程示例。

*[class~="stars-6+"]:before{color:#00bfff; content:'\2605\2605\2605\2605\2605\2605\002B'; }

和HTML

<div class="stars-6+">
Hello
</div>

javascript很简单，不需要任何特殊内容。

[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6+", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],