Star ratings

Tags: #css

dabblet.css

/**
 * Star ratings with CSS
 */

.rating {
	  unicode-bidi: bidi-override;
	  direction: rtl;
}

.rating > span {
	  cursor: pointer;
	  display: inline-block;
	  position: relative;
	  width: 1.1em;
}

.rating > span:hover:before,
.rating > span:hover ~ span:before {
	   content: "\2605";
	   position: absolute;
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->
<div class="rating">
	<span>☆</span>
	<span>☆</span>
	<span>☆</span>
	<span>☆</span>
	<span>☆</span>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}