Half star Chrome

HTML

<div class="stars">
                        <span class="star on"></span>
                        <span class="star half"></span>
                        <span class="star"></span>
                    </div>

CSS

.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;
        }