here is my solution:
SCSS:
%full-star {
&:after {
content: "\f005";
}
};
%half-star {
&:after {
content: "\f123";
}
};
.rating {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
color: #900;
$this: &;
&__item {
font-size: 24px;
display: block;
font-family: FontAwesome;
&::after {
content: '\f006 ';
}
}
@for $i from 0 to 6 {
&[data-rating='#{$i}'] {
#{$this}__item:nth-child(-n + #{$i}) {
@extend %full-star;
}
}
&[data-rating='#{$i + 0.5}'] {
#{$this}__item:nth-child(-n + #{$i}) {
@extend %full-star;
}
#{$this}__item:nth-child(#{$i + 1}) {
@extend %half-star;
}
}
}
}
HTML:
<ul class="rating" data-rating="3.5">
<li class="rating__item"></li>
<li class="rating__item"></li>
<li class="rating__item"></li>
<li class="rating__item"></li>
<li class="rating__item"></li>
</ul>
https://codepen.io/mustra/pen/WmvzZG?editors=1100