Изменение цвета и расстояния в звездах обзора Woocommerce

Question

Кто-нибудь знает, какой код CSS я мог бы использовать, чтобы изменить цвет звезд моего обзора, а также разделить их дальше?

У меня есть код ниже, но он только меняет цвет контура

.product .star-rating span:before,
.product .star-rating:before {
    color: #FF0000;
}

Какой код я бы добавил, чтобы сделать все это, а также расположить их немного дальше друг от друга?

Спасибо!

Answer 1

Следующее должно изменить цвет на #FF0000 и добавить 1px расстояния между звездами рейтинга:

.star-rating span:before,
.star-rating::before,
p.stars a:hover:after, 
p.stars a:after {
    color: #ff0000 !important;
    letter-spacing: 1px; 
}

Проверено и работает

Answer 2

Вы можете использовать следующее правило css, чтобы изменить цвет звезд рейтинга.

p.stars.selected a.active:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before{color:#ff0000!important;}

#ff000, использованное в вышеприведенном правиле, заставит отображаться красный цвет.Измените его на желаемое значение цвета.

Используйте следующие CSS для интервалов между звездами.

p.stars a{margin-right:5px!important;}

Измените 5px на любое значение, которое вы хотите использовать.

Надеюсь, это поможет.