why rating star width does not change? - html

Question

I am trying to create a star rating button that will change based on the given rates.
here is css code:
.star-ratings-css {
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 14px;
height: 14px;
margin: 0 auto;
position: relative;
padding:0;
margin-bottom: 3px;
text-shadow: 0.8px 0.8px 0 #a2a2a2;
}
.star-ratings-css-top {
color: #ffe111;
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
margin-left: 4px;
}
.star-ratings-css-bottom{
padding: 0;
display: block;
z-index: 0;
border-radius: 8px;
}
and this is the part of html code:
<div class="row" style="text-align: left;">
<div class="star-ratings-css-problem" style="width: 80px;">
<div class="row pl-5">
<div class="star-ratings-css-bottom"><span>★</span></div>
<div class="star-ratings-css-top" style="width: {% widthratio post.likes post.total_like 100 %}%;"><span>★ </span></div>
<div style="color: #ffe111"> {{ idea.like_ratio }}<span class="text-muted" style="font-size: 13px;"> ({{ post.likes|add:post.loves}})</span></div>
</div>
</div>
</div>
problem is the yellow length does not change, I mean style="width: {% widthratio post.likes post.total_like 100 %}%;" is totally behaving useless in the code!
but I expect change in the size of yellow part something like:

Answer 1

You could do something like this:
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:60%"></div>
</div>
.ratings {
p.osition: relative;
vertical-align: middle;
display: inline-block;
color: #b1b1b1;
overflow: hidden;
}
.full-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #fde16d;
}
.empty-stars:before, .full-stars:before {
content:"\2605";
font-size: 14pt;
}
.full-stars:before {
-webkit-text-stroke: 1px orange;
}
https://jsfiddle.net/hed8tajo/2/