css halfstar colors - html

Question

I've a question about star-symbols for rating showing. I have code
<style>
.goldstardiv { color: gold; }
.goldgraystardiv { color: khaki; }
.graystardiv { color: gray; }
</style>
<div class="goldstardiv">★</div>
<div class="goldgraystardiv">★</div>
<div class="graystardiv">★</div>
How to show with css a star having a gray left site and yellow right site?
Thank you

Answer 1

Put a div with a half grayed star (width 50% overflow hidden) over the colored one.
Html:
<div class="goldstardiv">
★
<div class="halfstar">★</div>
</div>
Css:
.goldstardiv { color: gold; position: relative; }
.halfstar {
position: absolute;
top: 0;
left: 0;
width: 8px;
color: #666;
overflow: hidden;
}
​
Half star with is given in pixels, but fiddle around with it to get it in % if you want.
Example:
http://jsfiddle.net/LV7SS/2/

Answer 2

The only way to do this with pure CSS is with a nasty hack like this, which isn't really ideal. This uses a negative margin(margin-left: -104px;) to position the grey div over the gold one.
You would be better off using images and sprites

Answer 3

You can do it by using the content:after property in CSS to display a second gold star over the gray one like this:
<style type="text/css">
.star {
display: inline-block;
width: 20px;
text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
display: inline-block;
color: gold;
content: '\2605';
position: absolute;
margin-left: -16px;
width: 8px;
overflow: hidden;
}
.star.gray { color: gray; }​
</style>
<div class="star gold">★</div>
<div class="star gold-gray">★</div>
<div class="star gray">★</div>​
You do need to be specific about sizes for this to work properly, so that you can correctly set the negative margin on the half-star, and crop it at half-width using overflow:hidden, but it does what you're after.
(I haven't specified font-size in the example, you may want to do that also)
Up-side to this technique is that you don't need additional markup in your html for the half-star, just the correct class.
EDIT
Somehow I pasted the wrong link to my jsFiddle, from a previous version I was still hacking the solution, rather than the working one... Probably deserved the downvote for that, but it does work!
See it working here.
EDIT 2
cimmanon mentioned the stars 'not really being content', which is quite true, but since the question asked for a CSS solution to the problem, I made one that doesn't require a sprite-map with all possible combinations.
Not because I've got anything against sprite maps - I don't - just because I wanted to have a go at it :)
Still including <span> elements for each star (hard to avoid) but aside from that it's all good markup and I assume would work pretty well for a screenreader.
Check it out here.
<style type="text/css">
.stars .label {
width: 1px;
color: transparent;
overflow: hidden;
position: absolute;
}
.star {
display: inline-block;
width: 20px;
text-align: center;
}
.star:before {
display: inline-block;
content: '\2605';
}
.star.on { color: gold; }
.star.half { color: gray; }
.star.half:after {
display: inline-block;
color: gold;
content: '\2605';
position: absolute;
margin-left: -16px;
width: 8px;
overflow: hidden;
}
.star.off { color: gray; }​
</style>
<div class="stars">
<span class="label">One and a half start (out of three)</span>
<span class="star on"></span>
<span class="star half"></span>
<span class="star off"></span>
</div>​