前提・実現したいこと
スターレーティングを中央揃えにして見た目を良くしたい。
####HTML
<p> <span class="star5_rating" data-rate="4"></span> </p>
####CSS
.star5_rating{ justify-content: center; position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: gray; /* グレーカラー 自由に設定化 */ font-size: 50px; /*フォントサイズ 自由に設定化*/ } .star5_rating:before, .star5_rating:after{ content: '★★★★★'; } .star5_rating:after{ position: absolute; z-index: 1; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #ffcc00; /* イエローカラー 自由に設定化 */ } .star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */ .star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */ .star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */ .star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */ .star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */ .star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */ .star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */ .star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */ .star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */ .star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */ .star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */ https://gyazo.com/8951d6fc86c9affc55e4fab9949cf9c8
試したこと
star5_ratingの親要素にdisplay:flex, justify-content: centerと指定して
中央揃えをしようと行いましたが変化がありません。
回答よろしくお願い致します。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/14 07:52