★★☆ Rating Me [HTML,CSS,★] ☆★★

index.html

<div class="rating">
  <input type="radio" name="rating"><label>Really Bad</label> 
  <input type="radio" name="rating"><label>Bad</label> 
  <input type="radio" name="rating"><label>Ok</label> 
  <input type="radio" checked name="rating"><label>Good</label> 
  <input type="radio" name="rating"><label>Really Good</label> 
</div>

style.scss

.unicode{
    font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
        "Chrysanthi Unicode", "Bitstream Cyberbit",
        "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
        "Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
        "Lucida Sans Unicode";
    //font-family /**/:inherit; /* resets fonts for everyone but IE6 */
}

 
/*Style the Rating Checkbox*/
.rating{
  position: relative;
  font-size: 2.1em;
  line-height: 2em;
  margin-bottom: 0.2em;
  display: inline-block;
  box-sizing: border-box;

  > label{
    visibility: hidden;
    position: absolute;
    text-align: center;
  }

  > input {
    width: 3.4em;
    height: 100%;
    vertical-align: top;
    visibility: hidden;
    cursor: pointer;
    box-sizing: border-box;
  
    &:checked {
      /*test adjacent sibling selector to select all until selected*/
      ~ input:after {
        color: black;
        content: "☆";
      }
      
      &:after {
        content:"★";
      }
      
      + label{
        visibility: visible;
        bottom: -0.6em;
        left: 0.2em;
        font-size: 1em;
        font-weight: bold;
        line-height: 1em;
        width:100%
      }
    }
    
    &:after {
      @extend .unicode;
      
      width: inherit;
      height: inherit;
      
      content:"★";
      font-size: 6em;
      color:orange;
      visibility:visible;
      vertical-align:top;
    }
    
    &:hover:after {
      content:"★"!important;
      color:rgba(200,200,0,0.8)!important;
    }
  }
}

// center the body content
html{
  width: 100%;
  height: 100%;
  display: table;
}
  
body {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

★★☆-Rating-Me-[HTML,CSS,★]-☆★★.markdown

★★☆ Rating Me [HTML,CSS,★] ☆★★

A Rating-Widget made from simple HTML: Radiobuttons, labels and some spicy CSS, stars added using Unicode Chars

A Pen by Mario Winkler on CodePen.

License.