Задать фон для каждого символа

268

08 апреля 2018, 22:38

Есть у меня,например, скриптовая надпись,которая отображает день недели(или же 2+ слов),и мне нужно,используя чистый css и зная название селектора надписи,задать одинаковый фон для каждого символа (фоном выступит газоразрядный индикатор).Как это реализовать,и есть ли другие варианты?

<div class="value b-tooltipped" data-direction="top" original-title="сколько дней я уже не грущу">2 дня </div>

Как я уже говорил,есть возможность редактировать только css.

Answer 1

В CSS нет возможности обратиться к каждому символу в слове, но если есть возможность обработать текст и каждый символ обернуть в контейнер (например SPAN), то можно будет обратиться к каждому симвлу по отдельности.
P.S если необходимо обратиться только к первому символу, можно использовать ::first-letter

.box span{ 
color:#fff; 
padding:2px; 
} 
 
.box span:nth-of-type(1){ 
background:red; 
} 
.box span:nth-of-type(2){ 
background:blue; 
} 
.box span:nth-of-type(3){ 
background:grey; 
} 
.box span:nth-of-type(4){ 
background:green; 
}

<div class="box"> 
<span>2</span> 
<span>д</span> 
<span>н</span> 
<span>я</span> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как убрать оранжевые рамки элемента [дубликат]

На данный вопрос уже ответили:

238

HTML

Стилизация “волны” в кнопке при клике

Как создать эффект волны при клике на кнопку?

299

HTML

Как вставить onclick в echo

как сделать так, что бы onclick="$('#exampleModal1')arcticmodal()" работал в echo?

329

Java

Telegram бот на Java

Подскажите, есть Telegram бот написанный на Java, использую официальное API, также же имеется БД с chatID (ID-пользователей) данного ботаЕсть задумка...

334