::after | スタイルシートリファレンス

::afterとは?

CSSの::afterは疑似要素の1つでセレクタの子要素の最後の要素として擬似的な要素を生成します。

一般的にはcontentプロパティとセットで利用され、contentプロパティでテキストや文字、カウンターなどが最初の要素として生成されます。また生成された要素はインラインとして生成されます。

また::afterではセレクタで指定した要素の子要素の「最後」に擬似的な要素を生成しますが、逆に子要素の「最初」に挿入する疑似要素として::beforeという疑似要素もあります。使い方はほぼ同じですので、あわせて覚えておきましょう。

::afterなのか:afterなのか

CSSの中で::after:afterの表記を見たことがある方も多いと思いますが、CSSではどちらの表記でも正常に動作します。

CSS3以前は:afterのようなコロン1つの表記でしたが、CSS3で疑似クラスと疑似要素を表記上区別するために、::afterのようなコロン2つの表記が登場しました。

構文

::after

or

:after

::afterを使ったサンプルコード

上記のサンプルコードでは::afterの疑似要素を使い、セレクタで指定した要素の最後の子要素としてテキストや画像を挿入しています。

::afterのブラウザ対応状況

CSSの疑似要素の::afterはモダンなブラウザのほぼ全てで対応しています。::afterのブラウザ毎の対応状況を知りたい方は下記よりご確認頂けます。

Can I use... Support tables for HTML5, CSS3, etc

::afterの関連情報

::afterが効かない

::before::afterの疑似要素を設定していても効かない・表示されないといた事があります。その対処法は下記でまとめていますので、ぜひ参考にしてみて下さい。

CSSの::before・::afterの疑似要素が効かない場合の対処法!のイメージ
CSSの::before・::afterの疑似要素が効かない場合の対処法!
CSSの::before・::afterの疑似要素が効かない場合の原因と対処法についてサンプルコード付きで解説します。contentプロパティがなかったり、positionの指定が間違っているなどいくつかの失敗パターンを紹介します。