Блог

Я пытаюсь создать кнопку звездного рейтинга, которая будет меняться в зависимости от заданных ставок.

вот код css:

 .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;
}
 

и это часть html-кода:

 <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">amp;nbsp;{{ idea.like_ratio }}<span class="text-muted" style="font-size: 13px;"> ({{ post.likes|add:post.loves}})</span></div>
            </div>                     
        </div>
                                    

</div>
 

проблема в том, что длина желтого цвета не меняется, я имею style="width: {% widthratio post.likes post.total_like 100 %}%;" в виду, что он совершенно бесполезен в коде!

но я ожидаю изменения размера желтой части примерно так:

Вы могли бы сделать что-то вроде этого:

  <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/