关于html：字体真棒百分比宽度堆叠图标

Font awesome percentage width stacked icon

本问题已经有最佳答案，请猛点这里访问。

我想用CSS实现以下效果：

enter image description here

此星形图标是字体。我想用百分比来定义橙色背景的宽度，所以50%应该是恒星的完美一半。

目前，我做了以下工作：

1 2	<span class="star star-under fa fa-star"></span> <span class="star star-over fa fa-star"></span>

还有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

问题是我需要提供宽度和高度才能使用宽度的百分比。如果跳过容器的宽度和高度，它将不显示任何内容，因为它包含绝对定位的子级。

此%值是在服务器端计算的，因此我宁愿将其保持在内联状态，如下所示：

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

最灵活的方法是什么？我所说的最灵活，是指不需要提供任何宽度或高度。