html - Use font awesome star rating define by width -

currently reviews use star rating displayed css background classes.
want replace font awesome because font sharper on high res screens.

the problem rating defined dynamically width class in %.
can not change code different div classes define width.

for example score of 4,5 stars displayed using class width="80%;"

max score 5 stars.

it should this:

how can replace font awesome stars?

see jsfiddle: https://jsfiddle.net/tlj2ybnu/8/

this answer includes 2 solutions. first pure css. set class indicate score 0 10. second snippet simpler and more flexible; allows set percentage in tag itself.

in both examples used stars wingdings font, use other fonts , characters or background image. solution in both cases have grey background of starts , golden overlay clipped right width.

1: predefined classes indicate value 0 10

i think bit of css can this. use special font, maybe wingdings option. contains couple of stars may use.

the snippet below shows can 1 element. add class score, , 1 of classes s0 s10 indicate score 0 10. of course, instead of using ::before , ::after pseudo-elements, add nested spans , give yellow 1 width of 80% in style attribute, in example score element more detached how displayed, think better approach.

i'd choose 1 ten, because indicated want half stars (which common). using scale 10, can use integer values, more intuitive programmer perspective. have integer score, translated css half stars.

of course can symbol font.

.score {    display: inline-block;    font-family: wingdings;    font-size: 30px;    color: #ccc;    position: relative;  }  .score::before,  .score::after {    content: "\2605\2605\2605\2605\2605";    display: block;  }  .score::after {    color: gold;    position: absolute;    top: 0;    left: 0;    overflow: hidden;  }    .score.s0::after {    width: 0%;  }  .score.s1::after {    width: 10%;  }  .score.s2::after {    width: 20%;  }  .score.s3::after {    width: 30%;  }  .score.s4::after {    width: 40%;  }  .score.s5::after {    width: 50%;  }  .score.s6::after {    width: 60%;  }  .score.s7::after {    width: 70%;  }  .score.s8::after {    width: 80%;  }  .score.s9::after {    width: 90%;  }  .score.s10::after {    width: 100%;  }

the score is: <span class="score s7"></span>

2: set percentage straight in tag

if want set width in html specifically, can't use ::before , ::after. you'll need actual element that. actually, makes css bit easier, because don't need predefine widths. html isn't complex. span score gets 1 anonymous sub element has width set. can specify width 0 100%.

the outer element (with class) serves container, , generates grey stars. inner element generates yellow stars overlaid on grey ones.

.score {    display: inline-block;    font-family: wingdings;    font-size: 30px;    color: #ccc;    position: relative;  }  .score::before,  .score span::before{    content: "\2605\2605\2605\2605\2605";    display: block;  }  .score span {    color: gold;    position: absolute;    top: 0;    left: 0;    overflow: hidden;  }

the score is: <span class="score"><span style="width: 88%"></span></span>