.rating-mark {
    width: 125px;
    height: 25px;
    margin-left: 10px;
}

.rating-mark input[type="radio"] {
    display: none;
}

.rating-mark__label {
    float: right;
    display: block;
    width: 25px;
    height: 25px;
    background: url(/local/templates/cf/images/star.svg) no-repeat 50% 0;
    cursor: pointer;
    transition: .4s;
}

.rating-mark .rating-mark__label:hover,
.rating-mark .rating-mark__label:hover ~ .rating-mark__label,
.rating-mark input[type="radio"]:checked ~ .rating-mark__label {
    background: url(/local/templates/cf/images/star-active.svg) no-repeat 50% 0;
}