coderisimo
@coderisimo

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

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

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

Спасибо

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

но, если есть мысли - делитесь ))
  • Вопрос задан
  • 262 просмотра
Пригласить эксперта
Ответы на вопрос 3
Punkie
@Punkie
Любой иконочный шрифт и менять цвет через color:
Ответ написан
ответ: нельзя

а почему "заморачиваться с прозрачными png"? в чем морока?
Ответ написан
@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;
	}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы