CSS Only Star Rating


I needed this little snippet for a automated feedback email. Usually in a form i would instead style radio buttons, however as this was intended to be just a link only a elements have been used so only 1 click is required from the end user.

The key CSS selector here is the tilde a ~ b which will select every b that comes after an a.

Demo of this code below

The CSS for this is does 3 things to the <a> elements.

  1. Add pseudo elements to every <a> with css 'content' property set as empty star html entity.
  2. On hovering over the container for the <a> elements change the 'content' property to the full star html entity.
  3. Finally select all <a> elements that come after the <a> element being hovered over and change their 'content' to the empty star html entity.

The CSS for this is below.

a {
  text-decoration:none;
  font-size:50px;
  color:orange;
  padding:30px 0px;
}
.rating{
  margin-top:50px;
}
.rating a:before {
  content:"\2606"
}
.rating:hover a:before {
  content:"\2605"
}
.rating a:hover ~ a:before {
  content:"\2606"
}