Звездный рейтинг является классическим элементом интерфейса пользователя. Любому веб мастеру хотя бы раз приходилось иметь дело со "звездочками". В данном уроке представлена идея, как сделать интерфейсную часть рейтинга без JavaScript несколькими строчками кода CSS. Звездный рейтинг на CSS В разметке используется символ юникода звезда (?). Если вы устанавливаете для своих документов кодировку UTF-8, то все должно пройти без проблем. В качестве альтернативы можно использовать &#9734;. Можно устанавливать столько звезд, сколько захочется: 1 <div class="rating"> 2 <span>?</span><span>?</span><span>?</span><span>?</span><span>?</span> 3 </div> Далее нужно преобразовать "пустую" звезду в "заполненную" при наведении курсора мыши (поискать такой символ можно на сайте Gallery). легко решается путем размещения псевдо-элемента с "заполненной" звездой (?) сверху для псевдо-класса :hover: 1 .rating > span:hover:before { 2 content: "\2605"; 3 position: absolute; 4 } Просто абсолютно позиционируем элемент, по умолчанию в большинстве браузеров используются свойства top: 0; left: 0;. Поэтому "заполненная" звезда попадает поверх "пустой" звезды. Можно также изменить цвет. Но так мы имеем дело только с одной звездой. А правила шаблон интерфейса требуют, чтобы все звезды были "заполнены". Например, если курсор мыши наволится поверх 4-й звезды, то все 4-е звезды должны стать "заполненными", то есть 1-я, 2-я, 3-я и 4-я. В CSS нет способа для выбора предыдущих дочерних элементов. Но есть способ выбрать последующие дочерние элементы с помощью комбинаторов соседних элементов. Если мы изменим порядок символов, то затем сможем использовать общий комбинатор соседних элементов для выбора всех звезд, которые стоят перед звездой с фокусом ввода визуально, но после нее в структуре документа HTML . 1 .rating { 2 unicode-bidi: bidi-override; 3 direction: rtl; 4 } 5 .rating > span:hover:before, 6 .rating > span:hover ~ span:before { 7 content: "\2605"; 8 position: absolute; 9 } Получаем работающий шаблон. Вот полный код: 01 .rating { 02 unicode-bidi: bidi-override; 03 direction: rtl; 04 } 05 .rating > span { 06 display: inline-block; 07 position: relative; 08 width: 1.1em; 09 } 10 .rating > span:hover:before, 11 .rating > span:hover ~ span:before { 12 content: "\2605"; 13 position: absolute; 14 }