Gitter Channel Archive 6th of January 2016

Say this is your HTML, this would render just fine without CSS (so it's aggressively enhanced!):

<p class="rating">     <span>         <span>3 out of 5 stars</span>     </span> </p>

Stuff this CSS in there and call it a day:

p.rating {     position: relative;     width: 100px;     height: 30px;     /* This would contains like your typical grey stars */     background-image: url(star-base.png); }  /* Set the width on render time, or via JavaScript.     E.g. 'width: 50%;' would give you 2.5 stars, 60% 3 stars, etc. */ p.rating > span {     position: absolute;     top: 0;     left: 0;     height: 100%;     /* These are your coloured in stars */     background-image: url(star-filled.png); }  /* This contains the text. Let's visually hide these */ p.rating span > span {     position: absolute;     clip: rect(0, 0, 0, 0);     width: 1px;     height: 1px;     overflow: hidden; }