ホームページ制作MATSUTE BLOG

この記事は「2020年12月22日」に書かれた記事です

1．「::before」「::after」と「:before」「:after」の違いって何？

「::before」「::after」と
「:before」「:after」のように、コロン（:）が1つのものと、2つのものが書かれている設定を見たことがありませんか？

また、「:hover」「:active」のように（:）が1つの記述はほかにもあります。特に把握していなくても感覚的にコーディングはできてしまいますが、ざっくりと確認しておきましょう。

「::before」「::after」と「:before」「:after」の違い

• CSS2で使用する記述＝（:）が1つの「:before」「:after」
• CSS3で使用する記述＝（:）が2つの「::before」「::after」となります。

書き方が異なりますが内容は同じです。
現在ホームページを制作するときは、CSS3を使用するため、「::before」「::after」を使っている人の方が多いのではないでしょうか。

「:before」「:after」を使う場合はどんな時？

CSS3になる以前のCSS2では、「:before」「:after」という表記を使っていました。IE8など（もういいでしょと思うこのブラウザでは）「::before」「::after」は使用できず「:before」「:after」でないと動きません。そのため古いブラウザ等を意識した場合、（:）が1つの記述「:before」「:after」を使います。

※CSS2とCSS3には互換性があるのでCSS3を使用していても、CSS2時代の「:before」「:after」でも動作します。

じゃあ、「:before」「:after」の方がいいの？

と思いますが、個人的には代表的な各ブラウザ（Microsoft Edge, Firefox, Chrome, Safari, Opera）のCSS3への対応は進んでいるので「::before」「::after」でよいのではないかと思います。

ただし、自分のホームページであれば割り切ることができますが、ホームページ制作会社で働く場合やホームページ制作を請け負う場合は、どのブラウザーまで表示できることを保証するかによって、選択する必要があります。

2．疑似クラスってなに？

「:hover」「:active」などの疑似クラスも「:before」「:after」（「: :before」「: :after」）と同様に（:）を使った記述ですが、「:before」「:after」の仲間ではありません。

疑似要素と疑似クラスの違い

CSS2の時代、
「:before」「:after」
「:hover」「:active」

と同じ（:）1つの表記で分かりにくかったため、CSS3の規格が登場した際、疑似要素と疑似クラスを識別するため、「before」「after」などの疑似要素の方に（:）を2つつける仕様に変更されました。

疑似要素（「: :before」「: :after」など）が要素の一部に対して擬似的にスタイルを適用するのに対し、疑似クラスは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。

代表的な疑似クラスには、下記のものがあります。

• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• a:link（未訪問）
• a:vesited（訪問済み）
• a:hover（ホバーしたときに有効）
• a:focus（clickしてからマウスを話した後も、他の要素を選択するまで有効）
• a:active（clickしている間有効）

3．疑似要素の代表格「::before」「::after」

なんといっても重要な特性は、HTMLにコーディングに手を加えることなく装飾を適用することができることではないでしょうか。ちょっとした装飾をするために<div>の入れ子にしたり、無理やりタグを尽かしたりしなくてよいので非常に助かります。

代表的なの疑似要素は下記の2つです。

• 「::before」要素の直前に内容を追加することができる
• 「::after」要素の直後に内容を追加することができる

※具体的な使い方については、このあとの記事で登場します。