Come creare un sistema di votazione con CSS

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="demo-content">
  <div class="c4l-rating">
    <input name="c4l-rating" type="radio" id="c4l-rate1" value="1" />
    <label for="c4l-rate1"></label>

    <input name="c4l-rating" type="radio" id="c4l-rate2" value="2" />
    <label for="c4l-rate2"></label>

    <input name="c4l-rating" type="radio" id="c4l-rate3" value="3" />
    <label for="c4l-rate3"></label>

    <input name="c4l-rating" type="radio" id="c4l-rate4" value="4" />
    <label for="c4l-rate4"></label>

    <input name="c4l-rating" type="radio" id="c4l-rate5" value="5" checked />
    <label for="c4l-rate5"></label>
  </div>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/come-creare-un-sistema-di-votazione-con-css/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Come creare un sistema di votazione con CSS
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/come-creare-un-sistema-di-votazione-con-css/
 */
 
/* Required snippet style */
input[name="c4l-rating"] { display: none; }
input[name="c4l-rating"] + label:after { content: none; }
input[name="c4l-rating"] + label { font-family: 'FontAwesome'; }
input[name="c4l-rating"] + label:before {
    background-color: transparent;
    border: none !important;
    color: #ffc107;
    content: '\f005';
    font-size: 1.33333333em;
    transition: none;
}
input[name="c4l-rating"]:checked ~ label:before {
    background-color: transparent;
    border: none !important;
    color: #607d8b;
}
input[name="c4l-rating"]:checked + label:before { color: #ffc107; }
input[name="c4l-rating"] + label:hover ~ input + label:before { opacity: 0.6; }
 
 /* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem;  text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }