Encontré un diseño de unas estrellas aquí ¿Como crear tres estrella mas una estrella media sin :hover?
Estoy utilizando su mismo diseño, solo que las estrellas más pequeñas, al cambiar la imagen por más pequeñas el diseño se ha desordenado a pesar haber cambiando los valores no logro conseguir que se ordene correctamente.
Que valor debo ir cambiando para que se adapte de la misma manera de ese diseño solo que las estrellas son más pequeñas.
.c-rating {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.c-rating__item {
-webkit-box-flex: 0;
-webkit-flex: 0 0 12px;
-ms-flex: 0 0 12px;
flex: 0 0 12px;
height: 18px;
background-position: -10px 0px;
background-image: url(http://svgshare.com/i/4U0.svg);
cursor: pointer;
}
.c-rating__item.left {
background-position: 0px 0px;
}
.c-rating__item.is-active,
.c-rating__item:before {
background-position: -33px 0;
}
.c-rating__item.left.is-active,
.c-rating__item.left:before {
background-position: -21px 0;
}
<ul class="c-rating">
<li class="c-rating__item is-active left" data-index="0"></li>
<li class="c-rating__item is-active" data-index="1"></li>
<li class="c-rating__item is-active left" data-index="2"></li>
<li class="c-rating__item is-active" data-index="3"></li>
<li class="c-rating__item is-active left" data-index="4"></li>
<li class="c-rating__item is-active" data-index="5"></li>
<li class="c-rating__item is-active left" data-index="6"></li>
<li class="c-rating__item" data-index="7"></li>
<li class="c-rating__item left" data-index="8"></li>
<li class="c-rating__item" data-index="9"></li>
</ul>