基於 bootstrap 字體圖標，用純CSS實現星級評分功能

需要用到的圖標

實現原理

關鍵屬性是 text-overflow: clip;，表示直接截斷文本。我們經常用這個屬性的另一個值 text-overflow: ellipsis; 來做省略表示。
先平鋪5個空心的圖標
再層疊5個實心圖標，控制實心圖標的寬度來達到截斷效果，結合 overflow:hidden 達到類似進度條的效果
優點是因為是字符，顏色大小很容易控制，而且不會影響其他內容
實心圖標層的寬度需要根據實際總寬度按比例計算。比如總寬度是字體大小24px的情況下總寬度120，評分4.5（總分5分）.實際寬度為 4.5*120/5

代碼

<div style="position:relative; font-size: 20px;color:#985f0d;">
	<div>
		<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
	</div>
	<div style="position:absolute; left:0;top:0;width: 73px; overflow: hidden;text-overflow: clip;white-space: nowrap;">
		<span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
	</div>
</div>

效果

替換成任意字符

<div style="background: #CECECE; padding:50px;">	
	<div style="position:relative; font-size: 20px; display: inline-block;">
	    <div style="font-weight: bold;color:#FFFFFF;">
	        必須五星好評
	    </div>
	    <div style="position:absolute; font-weight: bold; left:0;top:0;width: 73%; overflow: hidden;text-overflow: clip;white-space: nowrap;color:orangered;">
	        必須五星好評
	    </div>
	</div>
</div>