字体真棒百分比宽度堆叠图标

这个问题在这里已经有了答案：

是否可以将CSS应用于角色的一半？ 18个答案

---

您可以将容器设置为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

上一篇: Font awesome percentage width stacked icon

下一篇: CSS Display One Character in 2 Colors