CSS3でスターレーティング

CSS3でスターレーティング

CSSだけで以下のようなスターレーティング(星評価)を実装する簡単なサンプルコードを記述してます。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

スターレーティング

スターレーティング(星評価)の★マークは:before疑似要素の「content」プロパティで作成しているので、簡単にマークを変えることができます。

サンプルコード

以下は実際に、スターレーティングを実装したサンプルコードとなります。

ブラウザ上で表示した結果