Font awesome percentage width stacked icon [duplicate]

Question

I want to achieve the following effect with CSS:

This star icon is a font. I would like to define the width of the orange background by percents, so 50% should be the perfect half of the star.

For now, I did the following:

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

And:

.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%;
}

The problem is that I need to provide the width and height in order to use % of width. And if I skip the container's width and height, it displays nothing, because it contains absolutely positioned children.

This % value is calculated on server side, so I'd rather keep it inline, like this:

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

What is the most flexible way to do this? By most flexible I mean the one that doesn't make it necessary to provide any width nor height.

Answer 1

You can set the container to display:inline-block, and only set the top icon to 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>