5-stars html-css redirecting to link

Issue

So I want to make a 5-stars rating system in html-css, when clicking on a star, It will redirect to a link and will rate an element.

HTML:

<div class="star-rating">
    <div class="star"><a href="/rate?r=1"></a>
        <div class="star"><a href="/rate?r=2"></a>
            <div class="star"><a href="/rate?r=3"></a>
                <div class="star"><a href="/rate?r=4"></a>
                    <div class="star"><a href="/rate?r=5"></a>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.star-rating{
    float: right;
    margin-left: auto;
}
.star{
    display: flex;
    color: gray;
    cursor: pointer;
}

.star a{
    text-decoration: none;
}

.star::before{
    content: '★';
    color: inherit;
}

.star:hover{
    color: yellow;
}

What can I do to make a star click redirect to a link, while keeping the fact that the star the mouse hovers over changes color, as well as the stars before it?

(Sorry for bad English).

I tried to make the anchor elemnt width = 1em and the .star margin-left = -1em but it doesn't work.

Solution

.star::before{
    content: '★';
    color: inherit;
}

Move that ★ into the link, so you got something to click on - change the selector to .star a::before

.star:hover{
    color: yellow;
}

And change that to modify the color of the child link of the hovered .star, but not also the rest of them in the nested .star elements inside, by making that .star:hover > a

.star-rating{
    float: right;
    margin-left: auto;
}
.star{
    display: flex;
}

.star a{
    color: gray;
    text-decoration: none;
}

.star a::before{
    content: '★';
    color: inherit;
}

.star:hover > a{
    color: yellow;
}

<div class="star-rating">
    <div class="star"><a href="/rate?r=1"></a>
        <div class="star"><a href="/rate?r=2"></a>
            <div class="star"><a href="/rate?r=3"></a>
                <div class="star"><a href="/rate?r=4"></a>
                    <div class="star"><a href="/rate?r=5"></a>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>

Answered By - CBroe