疑似クラスのデモ

ボタンのホバー時に色を変える

押されているボタンの色

フォームの入力中に枠色を変える

最初のリスト項目だけ色を変える

表の偶数行に色を付ける

行1
行2
行3
行4

疑似要素のデモ

要素の前にアイコンを表示

このテキストは::beforeでマークされています。

要素の後ろにアイコンを表示

このテキストは::afterでマークされています。

見出しの最初の1文字だけ大きくする

見出し風に最初の1文字を強調するデモです。

記事の1行目を目立たせる

これは1行目が強調されるようにスタイルを当てたパラグラフです。ブラウザのサイズによって1行の長さが変わるため、レスポンシブな見え方になります。