Star rating readonly in html email

I’ve a data coming from backend source in numeric form which will determine the rating. Numeric value ranges from 0-5 and can be 0.5,1.5,2.5 etc etc.

Number can be 2.5 and 2 and a half stars would be filled with Gold color or any accordingly.

Now I’ve been trying to do different things but failing constantly. I’ve tried using that value in data-attr and then applying styles according to the value but email doesn’t cater the data-attr IMO (not working for me).Positioning also doesn’t work. Background image support is buggy. So, I’m kind of stuck. If there’s any workaround please it’ll be a great help. I’m only looking for outlook and windows 10 mail right now.

My codepen (but not sure):

https://codepen.io/kenny-kk/pen/eYgMEej

HTML

<ul>
  <li>★</li>
  <li>★</li>
  <li class="active">★</li>
  <li>★</li>
  <li>★</li>
</ul>

Here’s a guide for css support in email: https://www.campaignmonitor.com/css/

Answer

It’d be better if you use the images instead of these Unicode stars. If your data is coming from backend maybe store it in data-attr and according to the value, show the image. For this you’ve to keep separate images in your code (I’m afraid that’s the only way). Image support is provided by all the mailing platforms.

mso-hide:all;

This will keep your images hidden, be sure to use this on div element. Use this style to unhide the image for that rating star.

[data-star="2.5"]{
mso-hide: unset;
}