CSS 中的伪元素

Question

我目前正在处理游戏的角色数据库。 JavaScript写了所有角色的角色数据和信息，CSS写了前端设计。每个角色都有特定的属性（攻击、HP、恢复等）。我关注的是他们的 Stars。他们的星星是指它们的稀有性（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: '050505050505[=12=]2B'; }

理想情况下，我会以相同的方式将 JavaScript 改为 6+ 而不是 6_plus 和 CSS，但我不知道该怎么做。我不确定是否有办法按照我希望的方式进行。有人告诉我，也许我可以做一个条件，以便它在读取 6_plus 时显示 6+，但我不确定这是否可能。非常感谢您的帮助。

提前致谢。

P.S. 这里有一个 link 数据库，如果你想自己检查的话：

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

Answer 1

这应该适用于您的 class 示例。

*[class~="stars-6+"]:before{color:#00bfff; content:'050505050505[=10=]2B'; }

和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 ],

CSS 中的伪元素

Pseudo Elements in CSS

javascript

css

css-selectors

pseudo-element