DEV Community

Discussion on: Scalable "star rating" without JS (and no SVG or image for the star)

 
nootkan profile image
nootkan • Edited

I am now trying to add a number to the right of the stars to indicate total number of voters.

I have tried using a span element after the star div but it doesn't line up properly with the star ratings.

From what I gather I cannot use margin or padding with a span element which is what I tried (span.ratingTotal{padding:0 0 5px 10px;}).

I also tried just placing the text inside the star div before the i tags and after them but that didn't work either.

The only thing I tried that seems to work is to use a p class tag and place it under the star ratings but I prefer to have it inline with them.

Is there a way to do this?
star rating totals

Thread Thread
 
afif profile image
Temani Afif

try like this: jsfiddle.net/ktpn8oq7/

Thread Thread
 
nootkan profile image
nootkan

Wow, thanks very much.

I had tried something similar but didn't make the same css changes as you.

I am trying to understand your css better as it is a little more advanced than I am used to.

I had decided to go with the p class but will now undo everything and try your solution.

Thanks again!