Шрифт удивительный процент ширины сложены значок

Question

Я хочу, чтобы достичь следующего эффекта с помощью CSS:

Эта звезда значок шрифта. Я хотел бы определить ширину оранжевого фона по процентам, поэтому 50% должны быть идеальной половиной звезды.

В настоящем время, я сделал следующее:

<div class="container"> 
    <span class="star star-under fa fa-star"></span> 
    <span class="star star-over fa fa-star"></span> 
</div> 

И:

.container 
{ 
    font-size: 200px; 
    height: 300px; 
    position: relative; 
    width: 100%; 
} 

.star 
{ 
    display: inline-block; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

.star-under 
{ 
    color: #ddd; 
} 

.star-over 
{ 
    color: #f80; 
    overflow: hidden; 
    width: 30%; 
} 

Проблемы заключается в том, что мне нужно, чтобы обеспечить ширину и высоту, чтобы использовать% ширину. И если я пропускаю ширину и высоту контейнера, он ничего не отображает, поскольку содержит абсолютно позиционированные дочерние элементы.

Это значение% рассчитывается на стороне сервера, так что я предпочел бы держать его рядный, как это:

<span class="star star-over fa fa-star" style="width: 62%;"></span> 

Что является наиболее гибкий способ сделать это? Наиболее гибким я имею в виду тот, который не делает необходимой для обеспечения любой ширины или высоты.

Answer 1

Вы можете установить контейнер в display:inline-block и установить только верхний значок на position:absolute.

.container { 
 
    font-size: 200px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.star-under { 
 
    color: #ddd; 
 
    vertical-align: top; 
 
} 
 
.star-over { 
 
    color: #f80; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 70%; 
 
    overflow: hidden; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<div class="container"> 
 
    <span class="star star-under fa fa-star"></span> 
 
    <span class="star star-over fa fa-star"></span> 
 
</div>