При наложении двух иконок виден цвет задней?

Question

[lilwings]

Есть такая верстка:

<div class="card-info__star-list">
    <div class="card-info__star-wrap">
        <span class="fa fa-star card-info__star card-info__star_back"></span>
        <span class="fa fa-star card-info__star card-info__star_front" style="width: 100%;"></span>
    </div>
    <div class="card-info__star-wrap">
        <span class="fa fa-star card-info__star card-info__star_back"></span>
        <span class="fa fa-star card-info__star card-info__star_front" style="width: 100%;"></span>
    </div>
    <div class="card-info__star-wrap">
        <span class="fa fa-star card-info__star card-info__star_back"></span>
        <span class="fa fa-star card-info__star card-info__star_front" style="width: 100%;"></span>
    </div>
    <div class="card-info__star-wrap">
        <span class="fa fa-star card-info__star card-info__star_back"></span>
        <span class="fa fa-star card-info__star card-info__star_front" style="width: 100%;"></span>
    </div>
    <div class="card-info__star-wrap">
        <span class="fa fa-star card-info__star card-info__star_back"></span>
        <span class="fa fa-star card-info__star card-info__star_front" style="width: 60%;"></span>
    </div>
</div>

Т.е желтая иконка накладывается на серую, но с позади виден серое очертание, подобие тени:



Как спрятать всю иконку за желтой? И почему серая иконка отдает что то типа тени?