Как засунуть в :after разноцветные буквы?

Question

[coderisimo]

Нужна вот такая разноцветная "красота" в раскрывающемся списке.


сделал с использованием : after и картинок. Недостаток - надо заморачиваться с прозрачными png ибо просто картинка с белым фоном выглядит не ахти (что видно на скрине). Можно ли как-то сделать это простым текстом?
Иными словами , можно сделать :after , где контент будет разноцветными буквами?

Спасибо

PS в общем сделал, прозрачными картинками


но, если есть мысли - делитесь ))

Answer 1

[Mr Crabbz]

Любой иконочный шрифт и менять цвет через color:

Comments

[coderisimo]

я могу поменять цвет ВСЕГО текста. Т.е я могу сделать все звездочки , например, красными.

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

А как сделать иx разного цвета?

[Mr Crabbz]

coderisimo: я бы посоветовал вам заменить стандартные выпадающие селектбоксы на https://harvesthq.github.io/chosen/ - там у вас будет полный контроль над содержимым выпадающего списка, включая любой цсс. И всякие ваши звёздочки с разными цветами реализовать там - дело двух минут.

[coderisimo]

Роман Краббз: для моей задачи это , скорее, как из пушки по воробьям. Уже сделал все способом, который описывал с вопросе.

Answer 2

[Денис Букреев]

ответ: нельзя

а почему "заморачиваться с прозрачными png"? в чем морока?

Comments

[coderisimo]

1) мне нужны были конкретные цвета (т.е нужно было делать все самому). Задать цвет символа в CSS было бы проще
2) экспорт звездочек из шопа давал рваные края
3) пришлось качать/ставить иллюстратор/вспоминать, как с ним работать )))

результат в шапке. осталось слить все в один файл (сейчас каждый тип рейтинга в отдельном png)

[Денис Букреев]

как все сложно
а по сути: скачать .png звездочку, слепить из нее на раз два все что надо, с помощью gulp создать спрайт и пользовать

самое сложное из этих действий - копировать звездочки в фш и придавать им цвета

сейчас принято автоматизировать рутину и по сути задача минут на 15

[coderisimo]

В принципе,все просто, если знаешь и умеешь. ))
но как я написал ,при работе с фотошопом получаются рваные края -

копировать и придавать нужный цвет я могу в течение 1 минуты

Answer 3

[Zhainar]

можно попробовать вставить svg картинку фоном у псевдоэлемента, а внутри менять значение 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' id='Layer_1' version='1.1' viewBox='0 0 64 64' width='64px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns: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.815z 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.633z'/><path fill='#0000FF' d='M19.224,41.319c-3.007,0-5.444,2.081-5.444,4.648v12.218l9.862-7.296c-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.319z'/></g></svg>");
		background-size: contain;
		background-position: center;
	}

Comments

[coderisimo]

Круто ! Интересная идея. Только не работает. ((
Кстати, насколько я знаю можно url писать сразу в контент - content: url(......)

[Zhainar]

coderisimo: да, на селектах не получается