rating star

index.htm

<ul class="stars">
  <li class="star full"></li>
  <li class="star full"></li>
  <li class="star full"></li>
  <li class="star half"></li>
  <li class="star empty"></li>
</ul>

style.cs

.stars .star {
    height: 14px;
    width: 14px;
    display: inline-block;
    color: #006937;
    font-size: 40px;
    line-height: 42px;
    font-weight: 500;
    position: relative;
    margin-right: -1px;
}
.stars .star::after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    font-size: 14px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f005";
}
.stars .star.empty:after {
    content: "\f005";
    font-weight: 400;
}
.stars .star.half:after {
    content: "\f089";
}
.stars .star.full:after {
    content: "\f005";
}