How to show only half of bootstrap glyphicon with css

Question

I'd like to make a star rating for an item made with glyphicon-star, since it is not possible having glyphs with more than one color, would it be possible to display only half?

I'm using bootstrap and I'm working on its source with less.

cheers

    <p>
      <span class="view-stats">{$post.numviews|number_format:0} views</span>
      <span class="view-stars pull-right">
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color"></span>
        <span class="glyphicon glyphicon-star star-color" ></span>
      </span>
      &nbsp;
    </p>

Thanks, here's the Less snippet

 .half {
    position:relative;

    >after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
    }
}

Answer 1

demo - http://www.bootply.com/10XzUrAamb

changed left to 47% so that it adjusts with different font sizes

you can do something like this

.half {
    position:relative;
}
half:after {
    content:'';
    position:absolute;
    z-index:1;
    background:white;
    width: 50%;
    height: 100%;
    left: 47%;
}