字体真棒百分比宽度堆叠图标
这个问题在这里已经有了答案:
您可以将容器设置为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>
链接地址: http://www.djcxy.com/p/23781.html