html - CSS半星

我怎么能在IE和Chrome上得到同样的结果（半星）。
铬合金：http://jsfiddle.net/Auqj8/

.star {
    font-size: x-large;
    width: 50px;
    display: inline-block;
    color: gray;
}
.star:last-child {
    margin-right: 0;
}
.star:before {
    content: '\2605';
}
.star.on {
    color: gold;
}
.star.half:after {
        content: '\2605';
        color: gold;
        margin-left: -20px;
        width: 10px;
        position: absolute;
        overflow: hidden;
}

在IE中：http://jsfiddle.net/86pqx/
谢谢您。

最佳答案

这在chrome和ie中都有效

.star {
    font-size: x-large;
    width: 50px;
    display: inline-block;
    color: gray;
}
.star:last-child {
    margin-right: 0;
}
.star:before {
    content:'\2605';
}
.star.on {
    color: gold;
}
.star.half:after {
    content:'\2605';
    color: gold;
    position: absolute;
    margin-left: -20px;
    width: 10px;
    overflow: hidden;
}

铬：http://jsfiddle.net/Auqj8/1/
即：http://jsfiddle.net/86pqx/3/

关于html - CSS半星，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21690979/