Pseudo Elements in CSS

Question

I'm currently working on a game's character database. The character data and information about all the characters is written in JavaScript and the front end design is written in CSS. Each character has certain attributes (attack, hp, recovery, etc.). The one I'm focusing on is their Stars . Their stars refer to their rarity (1 star = extremely common; 6 stars = extremely rare). The game recently introduced a super evolution technique wherein a 6 star character can become a 6 star + (read as 6 star plus) character. This is where my problem is. I know that the JavaScript will work just fine and I know that my problem is in the CSS. Please look at the code below.

This is the JavaScript for one of the Characters:

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

And the CSS to go with it:

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

Ideally, I would change the JavaScript to say 6+ instead of 6_plus and the CSS the same way, but I can't figure out how to do it. I'm not sure if there even is a way to do it the way that I'm hoping for. I was told that maybe I could make a conditional so that it says 6+ when it reads 6_plus but I'm not sure if that's possible. I would really appreciate some help.

Thanks in advance.

PS here's a link to the database if you'd like to check it out for yourself:

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

Answer 1

This should work for your class example.

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

and the html

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

The javascript is straight forward and requires nothing special.

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