pvaKNO

index.html

<div class="rating">
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star"></i>
  <i class="glyphicon glyphicon-star half"></i>
</div>

pvaKNO.markdown

pvaKNO

A Pen by Leo Gono on CodePen.

License.

style.scss

.glyphicon-star {
  font-size: 40px;
  color: #e67e22;
  &.half {
    position: relative;
    &:before {
      position: relative;
      z-index: 9;
      width: 47%;
      display: block;
      overflow: hidden;
    }
    &:after {
      content: '\e006';
      position: absolute;
      z-index: 8;
      color: #bdc3c7;
      top: 0;
      left: 0;
    }
  }
}