Koda Koda - 3 months ago 11
CSS Question

50% percent is more than half content when adding letter-spacing

I have this code which displays five stars:



@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.score {
display: inline-block;
font: normal normal normal 20px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
text-decoration: none;
color: #dcdcdc;
position: relative;
letter-spacing: 10px;
}
.score {
border: 1px solid #000;
}
.score::before,
.score span::before{
content: "\f005\f005\f005\f005\f005";
display: block;
}
.score span {
color: #FFD700;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}

<span class="score" data-toggle="tooltip" title="5 Bewertungen | Durchschnitt: 4.6 Punkte">
<span style="width: 50%"></span>
</span>





The stars are separated using
letter-spacing
:

letter-spacing: 10px;


I want to highlight 2 stars and a half, so I use
width: 50%
. But the 50% is not exactly in the middle of the star. When I remove
letter-spacing
, the 50% looks like correct. How can I change it so that the 50% is correct with a
letter-spacing
?

Answer

Remove the letter spacing and add a space in-between each of the stars like the following instead:

https://jsfiddle.net/39y4ctkg/

.score::before,
.score span::before{
  content: "\f005\00a0\f005\00a0\f005\00a0\f005\00a0\f005";
  display: block;
}

enter image description here

Comments