How can I replace text value to star

Question

i'm user query echo rating post as:

<a href="link">title</a><div class='rating'>4.5</div>

how to change <div class='rating'>4.5</div> to start image as:

1.5 => star 1.5

3 => start 3..... by css or anything

Thanks

Answer 1

You could use CSS and the Unicode character for stars.

Something like this:

<span class="rating star1">1</span>

With CSS (using generated content - the hex value for a black/full star is 2605, a white star/outline only is 2606):

.rating.star1:before {
    content: '\2605';
    color: red;
}

A basic fiddle: http://jsfiddle.net/r11vgbwd/