Skip to content

Instantly share code, notes, and snippets.

@joduplessis

joduplessis/stars.css

Created November 10, 2022 19:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joduplessis/8ccf53766e7b3d2dd4940af9cfb1554c to your computer and use it in GitHub Desktop.
Save joduplessis/8ccf53766e7b3d2dd4940af9cfb1554c to your computer and use it in GitHub Desktop.
Download ZIP
CSS for highlighting all previous stars in a rating component (without JS!).
Raw
stars.css
.rate {
width: fit-content;
}
.rate__star {
color: var(--f-color-text-weakest);
padding: var(--f-size-1);
}
.rate__star:hover {
color: var(--f-color-text-weaker);
}
.rate:hover > .rate__star:not(:hover) {
color: var(--f-color-text-weaker);
}
.rate:hover .rate__star:hover ~ .rate__star {
color: var(--f-color-text-weakest);
}
.rate:hover .rate__star:hover ~ .rate__star svg {
fill: var(--f-color-text-weakest) !important;
}
@joduplessis
Copy link
Author

Just replace the vars!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment