body{
background: #222225;
color: white;
margin: 100px auto;
}
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.rating > input{
display:none;
}
.rating > label {
position: relative;
width: 1.1em;
font-size: 15vw;
color: #FFD700;
cursor: pointer;
}
.rating > label::before{
content: “\2605”;
position: absolute;
opacity: 0;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before {
opacity: 1 !important;
}
.rating > input:checked ~ label:before{
opacity:1;
}
.rating:hover > input:checked ~ label:before{
opacity: 0.4;
}
How would i change the size of the stars?
good stuff! do you know how i could use the same thing multiple time? because at the moment it is only styling the first one