CSSのセレクタはHTMLタグ、ID属性やclass属性などの要素に直接指定するものだけではありません。
セレクタの中には疑似要素という要素そのものではなく、要素の前後の部分などを指定する『疑似要素』というものがあります。
要素の前後に装飾を付けたい時に有用な方法になるので、今回はこの疑似要素について解説していきます。

擬似クラスについては以下の記事で解説していますので、擬似クラスについて知りたい方はぜひご覧ください。

CSSの擬似クラスとは？基本の利用ケースを分かりやすく解説

0.1 疑似要素の記述方法
0.2 ::before と ::after 要素
0.3 疑似要素と疑似クラスの違い
0.4 疑似要素の注意点

1 フロントエンドを学習するならSkilled(スキルド)

疑似要素の記述方法

疑似要素の記述方法は以下の通りです。

.message {
    font-size: 64px;
    font-weight: bold;
    color: #ea6464;
}
.message::before {
    content: '"'
}
.message::after {
    content: '"'
}

上記のコードのbeforeとafterの部分が疑似要素の部分にあたります。
疑似要素を付けたいセレク手上に『::』で擬似要素を付け加えることができます。

疑似要素のコロンの数

疑似要素のコロンは『:』シングルコロンでも付与することが出来ますが、最新のCSSであるCSS3では擬似クラスはシングルコロン、疑似要素はダブルコロンで記述し区別するようになりました。
以前まではブラウザがCSS3に対応しきれていなかったため、疑似要素もシングルコロンで対応するケースがありましたが、現在、主要で扱われているブラウザはCSS3に対応されているため、疑似要素はダブルコロンで記述するようにしましょう。

::before と ::after 要素

疑似要素の中にはいくつか種類がありますが、疑似要素の中でも特に扱われる::before と ::after の使い方を学習していきましょう。
疑似要素の中でも実践でよく使われるのは ::before と ::after 要素です。
これらの要素は以下の効果があります。

名前	説明
;:before	要素の前に適用される
::after	要素の後に適用される

以下の例を見てみましょう。

<div class="message">
    Message
</div>
<style>
    .message {
        font-size: 64px;
        font-weight: bold;
        color: #ea6464;
    }
    .message::before {
        content: '"'
    }
    .message::after {
        content: '"'
    }
</style>

上記のコードでは、:beforeと:after 要素を使い要素の前と後に『”』を付けています。

before要素とafter要素はこのように要素に直接ではなく、前と後の部分に装飾を当てることができます。

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

CSSには疑似要素とは別に擬似クラスというものがありますが、これらは完全に別の意味になります。
擬似クラスは要素がフォーカスされた、要素にマウスーオーバーしたなど特定の状態の時に使用するものです。疑似要素は特定の状態に関係になく要素に付け加えるために使用されるものでなので、明確に異なるものであるということを覚えておきましょう。

疑似要素の注意点

疑似要素を使ってcontentプロパティを使えば、CSSで指定の文字を付け加えることも可能です。
しかし、contentプロパティで文字を付け加えることは、SEOに悪影響を与える可能性があります。
例えば、以下のようにタイトルの前に『Pick Up』という文字を入れたとします。
表示上はこの部分が強調していることが分かりますが、ブラウザからはPick Upの部分は装飾として認識される可能性があり、ピックアップされているコンテンツと認識されないことがあります。
::before要素と::after要素には伝えたいメッセージには使用しないことが重要です。

<h1 class="title">
    SKILLED
</h1>
<style>
    .title {
        font-size: 64px;
        font-weight: bold;
        text-align: center;
    }
    .title::after {
        content: 'Pick Up';
        color: #ea6464;
        padding-right: 10px;
        font-weight: bold;
    }
</style>