GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Rating

HTML

<div class="rating">
<button class="rating__star"></button>
<button class="rating__star"></button>
<button class="rating__star"></button>
<button class="rating__star"></button>
<button class="rating__star"></button>
</div>

CSS

.rating {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;

flex-direction: row-reverse;
}

.rating__star:hover,
.rating__star:hover ~ .rating__star
{
color: transparent;
}

/*
Make all previous stars selected when hover on a star
Note that we use \`flex-direction: row-reverse\` on the container
*/

.rating__star:hover:before,
.rating__star:hover ~ .rating__star:before
{
color: #eab308;
content: '★';
left: 0;
position: absolute;
}

.rating__star {
font-size: 1.5rem;

/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;

/* Used to position the hover state */
position: relative;
}
Demo
Follow me on and to get more useful contents.