Ratings Stars

dabblet.css

/*
	Ratings Stars
	(with as little code as possible)
*/
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
  clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}


.halfStyle {

    position: relative;

    display: inline-block;

    font-size: 80px; /* or any font size will work */

    color: black; /* or transparent, any color */

    overflow: hidden;

    white-space: pre; /* to preserve the spaces from collapsing */

}



.halfStyle:before {

    display: block;

    z-index: 1;

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    content: attr(data-content); /* dynamic content for the pseudo element */

    overflow: hidden;

    color: #f00;

}body { padding: 100px; }

dabblet.html

<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span class="halfStyle" data-content="\2605">☆</span>
</div>

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}