Simple CSS3 Star rating system demo with tutorial

		.wrapper{
			float:left;
			width: auto;
			margin:8% 0 0 35%;
		}
		.css3-rating-stars,
		.css3-rating-stars label::before{
			display: inline-block;
		}
		.css3-rating-stars label:hover,
		.css3-rating-stars label:hover ~ label{
			color: #06befb;
		}
		.css3-rating-stars *{
			margin: 0;
			padding: 0;
		}
		.css3-rating-stars input{
			display: none;
		}
		.css3-rating-stars{
			unicode-bidi: bidi-override;
			direction: rtl;
		}
		.css3-rating-stars label{
			color: #ccc;
		}
		.css3-rating-stars label::before{
			content: "\2605";
			width: 48px;
			line-height: 18px;
			text-align: center;
			font-size: 48px;
			cursor: pointer;
		}
		.css3-rating-stars input:checked ~ label{
			color: #f5b301;
		}
		.css3-rating-disabled{
			opacity: .50;
			-webkit-pointer-events: none;
			-moz-pointer-events: none;
			pointer-events: none;
		}

		<div class="wrapper">
		<!-- css3-rating-stars -->
			<div class="css3-rating-stars">
				<form>
					<input type="radio" name="group-1" id="group-1-0" value="5" />
					<label for="group-1-0"></label>
					<input type="radio" name="group-1" id="group-1-1" value="4" />
					<label for="group-1-1"></label>
					<input type="radio" name="group-1" id="group-1-2" value="3" />
					<label for="group-1-2"></label>
					<input type="radio" name="group-1" id="group-1-3" value="2" />
					<label for="group-1-3"></label>
					<input type="radio" name="group-1" id="group-1-4"  value="1" />
					<label for="group-1-4"></label>
				</form>
			</div>
		<!-- /css3-rating-stars -->
		</div>