字体真棒百分比宽度堆叠图标[重复]

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>