star

<style>
		.rating {
			unicode-bidi: bidi-override;
			direction: rtl;
		}
		.rating > span {
			display: inline-block;
			position: relative;
			width: 1.1em;
		}
		.rating > span:hover:before,
		.rating > span:hover ~ span:before {
			content: "\2605";
			position: absolute;
			color: gold;
		}


	</style>

<div class="rating">
	<span id="1" onclick="setgold(1)">☆</span><span id="2" onclick="setgold(2)">☆</span><span id="3" onclick="setgold(3)">☆</span><span id="4" onclick="setgold(4)">☆</span><span id="5" onclick="setgold(5)">☆</span>
</div>
<script>
	function setgold(id) {
		var i;
		for (i=1;i<=id;i++) {
			document.getElementById(i).style.color = "gold";
		}
	}
</script>