How to put in :after colorful letters?

Needed is such a colorful "beauty" in the drop-down list.
after.jpg

made using : after and pictures. Drawback - need to bother with a transparent png for just a picture with a white background looks not so hot (which can be seen in the screenshot). Is it possible to do it in plain text?
In other words , you can do :after where the content will be multi-colored letters?

Thank you

PS made, transparent pictures
after2.jpg

but, if you have any thoughts to share ))
July 9th 19 at 13:28
3 answers
July 9th 19 at 13:30
Any icon font and change the color using color:
I can change the color of the text. Ie, can I do all stars , for example, red.

.st1:after{
margin-left: 10px;
content: "";
font-family: 'Glyphicons Halflings';
color: red;
}

And how to make them different colors? - Camryn.Schimmel commented on July 9th 19 at 13:33
: I would advise you to replace the standard drop-down select boxes on https://harvesthq.github.io/chosen/ - there you will have full control over the content drop-down list, including any TSSS. And all your stars with different colors to realize there is the matter of two minutes. - keagan_Hartmann commented on July 9th 19 at 13:36
: for my problem it is rather as from a gun on sparrows. Already did all method which was described with the question. - Camryn.Schimmel commented on July 9th 19 at 13:39
July 9th 19 at 13:32
answer: it is impossible

why "bother with transparent png"? what confusion?
1) I needed a specific color (ie, have to do everything yourself). To set the color of the symbol in CSS it would be easier
2) export the stars of the shop gave torn edges
3) I had to download/install Illustrator/remember how to work with it )))

the result in the header. it remains to merge all into one file (now each type of rating in a separate png) - Camryn.Schimmel commented on July 9th 19 at 13:35
it's complicated
and in fact: download .png star dazzle of her times two, all that is necessary, using gulp to create a sprite and use

the most difficult of these steps is to copy the asterisks in photoshop to give them color

it is now conventional to automate the routine and in fact the task for 15 minutes - keagan_Hartmann commented on July 9th 19 at 13:38
In principle,it's easy if you know how to do. ))
but as I wrote ,when working with photoshop get ragged edges -
after3.jpg
copy and give the desired color I can for 1 minute - Camryn.Schimmel commented on July 9th 19 at 13:41
July 9th 19 at 13:34
you can try to insert svg image background of the pseudo-element and change the value of fill="#color"
.star:after {
 content: "";
 display: inline-block;
 width: 40px;
 height: 40px;
 background-repeat: no-repeat;
 background-image: url("data:image/svg+xml;utf8,<svg enable-background="new 0 0 64 64" height="64px sized" id="Layer_1" version="1.1" viewBox="0 0 64 64" width="64px sized" space="preserve" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"><g><path fill="#FF0000" d="M32,5.815c0,0-10.073,7.816-10.073,27.016c0,12.314,3.724,20.013,8.573,21.329V41.766c0-0.828,0.671-1.5,1.5-1.5 s1.5,0.672,1.5,1.5V54.16c4.849-1.315,8.573-9.015,8.573-21.329C42.073,13.409,32,5.815,32,5.815 z M31.882,20.633 c-1.729,0-3.418-0.155-4.914-0.438c1.465-4.721,3.531-7.901,5.051-9.761c1.516,1.837,3.572,4.989,5.027,9.715 C35.492,20.463,33.712,20.633,31.882,20.633 z"/><path fill="#0000FF" d="M19.224,41.319 c-3.007,0-5.444,2.081-5.444,4.648v12.218l9.862-7.296 c-1.463-2.496-2.556-5.737-3.201-9.57H19.224z"/><path fill="#0000FF" d="M44.776,41.319H43.56c-0.645,3.833-1.738,7.074-3.201,9.57l9.862,7.296V45.967C50.22,43.4,47.783,41.319,44.776,41.319 z"/></g></svg>");
 background-size: contain;
 background-position: center;
 }
Cool ! Interesting idea. Just doesn't work. ((
By the way, as far as I know it is possible to write directly the url in the content - content: url (......) - Camryn.Schimmel commented on July 9th 19 at 13:37
: Yes, have a select does not work - keagan_Hartmann commented on July 9th 19 at 13:40

Find more questions by tags CSSHTML