おそらく既出ネタですが、画像もJavaScriptも一切使わないであの5つ星評価のやつを実装しました。
ネタは簡単。
:checked擬似要素と+セレクタ、~セレクタを使う
input:checked擬似要素は、選択されたチェックボックスやラジオボタンなどを表します。それから+セレクタは、直後の兄弟要素を表します。たとえば
input:checked+label
とすれば、チェックを入れられたinput要素のすぐ後ろにあるlabel要素を表します。
~セレクタは+と似ていますが少し違います。+セレクタは直後の兄弟要素でしたが、~セレクタこれより後ろにある全ての兄弟要素を表します。つまり
input:checked~input
とすることで、選択されたチェックボックスやラジオボタンより後ろにある兄弟要素のうちのinput要素すべてを指します。
特に難しいことはしていません。ただ単に:after擬似要素に☆を書いたあと、位置をうまいこと調整して上に乗っけてあるだけもう少しいいかんじに変更しましたです。Zオーダーもいじる必要がないため、特に説明する必要はないかもしれませんね。
今はラジオボタンに1000pxほど左へ移動してもらっています。あとは微妙に位置調整をしたくらいですね。この結果、☆の透過度を変えても問題がなくなりました。
