CSS疑似要素の::beforeと::afterの使い方と正しい書き方【CSS】

CSSの疑似要素である::beforeと::afterを使って、要素の前後にテキストや画像・アイコンなどを追加する事が出来ます。この2つの疑似要素はよく使用される要素ですので、基本の使い方を覚えておくと便利です。

疑似要素beforeとafterとは

CSSの疑似要素::beforeと::afterは、指定した要素の前後に追加でコンテンツを挿入する事が出来る要素です。
::beforeが前、::afterが後に追加となります。

これは、コンテンツの装飾目的で使用されるものであり、それ以外での使用は非推奨となっています。
CSSだけで装飾が出来る為、HTMLの記述を増やす必要もないのでシンプルで読みやすいコードとなります。

疑似要素beforeとafterの書き方

基本となる書き方ですが、以下のように要素名+::beforeまたは::after、contentプロパティを合わせて記述します。

<p>疑似要素before、afterについて</p>

/*
contentプロパティに追加する内容を記述
※色は分かりやすくするため記述しています
*/

p::before {
    content: "before";
    color: red;
}

p::after {
    content: "after";
    color: blue;
}

疑似要素::before、::afterはcontentプロパティが必須となりますので注意してください。

コロン(:)の数について

:beforeと::beforeというように、コロンの数が1つか2つの記述を見る事があります。
CSSの疑似要素は、以前はコロンの数が1つでしたが、CSS3からコロンの数は2つと変更になっています。主要のブラウザ含め1つでも2つでも表示に問題はありませんが、現在はコロン1つが疑似クラス、2つが疑似要素と区別されるようになっています。

疑似要素で画像を表示する

疑似要素::before、::afterを使用して画像を挿入する事も可能です。
contentプロパティに画像のURLを記述します。

p::before {
    content: url(画像のURL);
}

p::after {
    content: url(画像のURL);
}

表示する画像の大きさを変更する場合

疑似要素に画像を表示すると、元画像のサイズがそのまま表示されてしまいます。
サイズを変更したい場合はwidthやheightプロパティは効きませんので背景画像として設定するやり方があります。
以下を例として紹介いたします。

p::before {
    /* 中身を何も入れない */
    content: "";

    /* inline-blockかblock要素に変更する */
    display: inline-block;

    /* 以下は画像に合わせて都度変更 */
    width: 30px;
    height: 30px;
    background: url(画像のURL) no-repeat center center;
    background-size: contain;
}

さいごに

いかがでしたでしょうか。
この疑似要素は使用する機会もかなり多くなりますので、基本的な使い方を覚えておくと便利です。