JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div id="rating">
    <span>&#9734;</span>
    <span>&#9734;</span>
    <span>&#9734;</span>
    <span>&#9734;</span>
    <span>&#9734;</span>
</div>

CSS

#rating{
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
}
#rating > span {
    display: inline-block;
    position: relative;
    width: 1.1em;
    margin-right:20px;
    font-size:50pt;
}
#rating > span:hover:before{
    cursor:pointer;
    content: "\2605";
    position:absolute;
}