html
1<div class="review-star"> 2<div class="white-star"> 3<i class="fas fa-star fa-fw"></i> 4<i class="fas fa-star fa-fw"></i> 5<i class="fas fa-star fa-fw"></i> 6<i class="fas fa-star fa-fw"></i> 7<i class="fas fa-star fa-fw"></i> 8</div> 9<div class="yellow-star" style="width:60%;"> 10<i class="fas fa-star fa-fw"></i> 11<i class="fas fa-star fa-fw"></i> 12<i class="fas fa-star fa-fw"></i> 13<i class="fas fa-star fa-fw"></i> 14<i class="fas fa-star fa-fw"></i> 15</div> 16</div>
css
1.review-star { 2 font-family: FontAwesome; 3 position: relative; 4 width: 5em; 5} 6 7.review-star * { 8 font-family: FontAwesome; 9 font-size: 1em; 10 font-style: normal; 11 letter-spacing: normal; 12} 13 14.white-star { 15 color: #aaa; 16 z-index: 0; 17} 18 19.yellow-star { 20 color: #FFCD00; 21 position: absolute; 22 z-index: 1; 23 top: 0; 24 left: 0; 25 overflow: hidden; 26 white-space: nowrap; 27} 28
FontAwesomeの星のフォントを灰色で5つ並べ、その上に完全に重なるように、同じフォントを黄色で並べたいです。
その時によってパーセンテージを変更したいので、黄色フォントのwidthだけはhtmlに書いています。
例えば上のようにwidth:60%;なら星3つが黄色く染まり、width:64%;なら星3つプラス4つ目の星の左端がほんの少しだけ黄色く染まるようにしたいです。
しかし、上のコードでは下の画像のように、60%で4つ目の星が染まってしまいます。
divはどれもpadding:0、margin:0、letter-spacing:normal状態で、後何ができるか分からなかったので、質問させていただきました。
どなたかお分かりになる方、ご教授いただけると嬉しいです!
わかりづらい文章で申し訳ありません!!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/24 11:16
2018/02/24 11:37
2018/02/24 12:29
2018/02/24 12:42
2018/02/24 13:23