Как сделать 1 hover на несколько элементов :before?

Question

[Rokis]

Здравствуйте.

Есть HTML:

<ol class="rating show-current">
<li class="icon-star-empty">5</li>
<li class="icon-star-empty">4</li>
<li class="icon-star-empty">3</li>
<li class="icon-star-empty">2</li>
<li class="icon-star-empty">1</li>
</ol>

И CSS:

.vote-block .rating li:nth-child(5):hover:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}
.vote-block .rating li:nth-child(4):hover:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}

.icon-star-empty:before { content: '\e801';}

Этот вариант работает нормально, когда я пытаюсь сделать так, чтобы при наведении на второй символ менялся ещё и первый, то ничего не работает.
Пример:

.vote-block .rating li:nth-child(4):hover:before, .vote-block .rating li:nth-child(4):hover:before .vote-block .rating li:nth-child(5):before {content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}

Как правильно написать, чтобы можно было при наведении на второй li элемент менять 1 и 2, на 3 - менять 1, 2 и 3, на 4 - менять 1, 2, 3, 4, на 5 - менять 1, 2, 3, 4, 5?

Пытаюсь сделать звёздный рейтинг для сайта с использованием иконок шрифта.

Answer 1

[Rokis]

Разобрался сам. Использовал такой код:

.icon-star-empty:hover:before,
.icon-star-empty:hover ~ .icon-star-empty:before
{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}

Answer 2

[Василий Сакович]

Только так :

.rating show-current::hover icon-star-empty:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}

или скриптом

Comments

[Василий Сакович]

вот так:

.rating.show-current::hover icon-star-empty:before{ content: '\e800';color:#ffe500;font-size: 30px;margin: 0;}