The 5 star ranking “width” % from 0 - 100% in CSS only works with the 20/40/60/80/100 but not for example 70%

Question

I have a problem. I work with mustache code to trigger the content. Now I have a 5 star review rating in the website but to trigger the content without going in the code I made the overlay with the mustache code. Everything is working fine. But if, for example, in the source code the rating is 4.5 stars, it doesn't fill the stars. But in the source code the class is changed to bcrating4.5 .

This is my code:

    <span class="rating bcrating{{rating}}"></span>

The rating class is the original code from the site.
The bcrating is the class below in the CSS code.
The mustache {{rating}} is the trigger code.

<p id="hiddenrating" hidden>{{rating}}</p>{{#recommendations}}                                        

  <ul class="box-content box-related" id="viewed-product-list">
    <li class="item" style="width:16.57%">
      <div class="item-info grid_2 alpha">         {{#image}}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
        <a class="product-image" href="{{URL}}" title="{{name}}">
          <img src="{{image}}" alt="{{name}}" style="width:50%">
        </a>    {{/image}}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
        <div class="product-details">
          <a href="{{URL}}" title="{{name}}">
            <span class="product-name">{{name}}</span>
            <div class="price leden">
              <span class="old_price">
                <strong>{{old_price}}</strong>
              </span>
              <span class="new_price">
                <strong>{{new_price}}</strong>
              </span>
            </div>
          </a>
          <div class="product-review-block">
            <span class="fivestar">
              <span class="rating-box">
                <a class="nobr" href="{{URL}}#customer-reviews-tab">
                </a>
                <span class="rating bcrating{{rating}}"></span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </li>
  </ul>{{/recommendations}}

CSS:

.bcrating0 {
    width:0%;
}
.bcrating1 {
    width:20%;
}
.bcrating2 {
    width:40%;
}
.bcrating3 {
    width:60%;
}
.bcrating4 {
    width:80%;
}
.bcrating5 {
    width:100%;
}

Answer 1

If {{rating}} passes in a value of "4.5", your class name for that .rating element in HTML is bcrating4.5 . HTML can have periods as part of a valid class name.

In your CSS you only have classes .bcrating4 and .bcrating5 . Nothing matches.

You need to define a class .bcrating4\\.5 where the period character is escaped, making it a valid selector in CSS that matches your HTML.

This is a handy character escaping tool: https://mothereff.in/css-escapes