CSSのbeforeとafterとcontentで要素の前後にコンテンツを表示する

CSSではbeforeとafterとcontentを記述して使うことで、HTMLでマークアップした要素の前後にCSSだけでコンテンツを表示することができます。

今まで真面目にCSSのbeforeとafter、そしてcontentの基本的なことを学ばず使用していた私ですが、beforeとafterとcontentとはどういうCSSなのか、そしてCSSでどう記述して使えばいいのか記事にして理解を深めたいと思います。

1. CSSのbeforeとafterとcontentとは？
2. beforeとafterとcontentの基本的な書き方と使用例
3. まとめ

CSSのbeforeとafterとcontentとは？

CSSのbeforeとafterとcontentはセットで覚えてしまうのがオススメです。

CSSのbeforeとafterとcontentの3つのうち、beforeとafterの2つはCSSのセレクタで使用し、HTMLを必要としない要素をCSSだけで作ることができる擬似要素です。

そしてcontentはCSSでプロパティとして使用することで擬似要素を指定したコンテンツの表示ができます。

ただしcontent プロパティを使って表示したテキストは選択したり、コピー＆ペーストができません。

これはマークアップ上には存在しない要素を擬似的にCSSのスタイルとして設定しているからなのだと私は解釈しています。そのためHTMLのマークアップとして検索エンジンに認識されないコンテンツになるのだと思います。

検索エンジンが認識できても「この要素には擬似要素のスタイルがある」くらいの認識なのかなぁと思います。

beforeは要素の前に擬似要素を作れる

CSSのbeforeはHTMLでマークアップした要素の「前」に擬似要素を作れます。

要素の前というのは例えば、HTMLのspanタグでマークアップした文字の「前」にCSSのbeforeが擬似的な要素を作り出します。

英語のbeforeを日本語にすると「前」を意味するので、そのままの意味で理解するとわかりやすいと思います。

afterは要素の後に擬似要素を作れる

CSSのafterは、beforeが要素の前に擬似要素を作るのに対して、HTMLでマークアップした要素の「後」に擬似要素を作れます。

例えば、HTMLのspanタグでマークアップした文字の「後」にCSSのbeforeが擬似的な要素を作り出します。

英語のafterを日本語にすると「後」を意味するので、そのままの意味で理解することができます。

ここまでの説明をまとめると、CSSの擬似要素で

beforeが要素の前
afterは要素の後

に擬似要素を組み込めるので、HTMLでマークアップした要素の「前後」に擬似的な要素を作ることができるCSSだということが理解できます。

contentで要素の前後にコンテンツを表示できる

CSSのbeforeとafterで擬似的に作り出した要素は、まだ擬似要素の中に何も表示できていない状態です。

そこで擬似要素の中にコンテンツ表示するためにCSSのcontentを使用してコンテンツを表示できます。

ただしサイトのコンテンツの中で重要なコンテンツは擬似要素は使用するべきではないと考えられます。先述しましたが、擬似要素はHTMLのマークアップとして検索エンジンに認識されないコンテンツだと考えられるからです。

beforeとafterとcontentの基本的な書き方と使用例

ではCSSでbeforeとafterとcontentの書き方はどのように記述すればいいのか、まずは基本的な記述方法からです。

<div>
    <span class="giji-youso">⬅︎要素前：要素後➡︎</span>
</div>

.giji-youso {
    background: #fff;
    color: gray;
    padding: 20px;
    font-size: 20px;
}

HTMLでは親要素のdivボックスを作り、子要素のspan要素の前後で擬似要素を表示するためにgiji-yousoというクラス名を指定してます。

親要素のクラス名のgiji-yousoでbeforeとafterを使用するためのdivボックスを調整しています。

.giji-youso::before {
    content: '★before';
    color: #aab1ff;
    padding-right: 10px;
}

そして先ほどHTMLでdiv要素につけたクラス名に::beforeもつけて「.giji-youso::before」と書きセレクタにします。

「::before」と「::after」は擬似要素と呼ばれるセレクタでCSS3から「::」ダブルコロンをつけて記述するようになっています。IE8にも対応する場合は、CSS2.1に従って「:before」「:after」とコロンで記述します。

また::beforeとこの後説明する::afterは指定した要素の前後にインラインボックスを挿入します。

そしてcontentで擬似要素にコンテンツ表示します。contentはCSSのプロパティです。

CSSで::beforeを指定したプロパティとしてcontent:を記述して、contentの値で要素の前に表示するコンテンツを記述します。

content: ‘★before’;

contentプロパティの値は「 ‘ ‘」クォートでテキストを挟んだ書き方をすることで::beforeで指定したcontentの値が擬似要素に表示できます。

次にCSSのafterで要素後に擬似要素を作り、contentプロパティでテキスト表示する書き方です。

.giji-youso::after {
    content: 'after★';
    color: pink;
    padding-left: 10px;
}

「.giji-youso::after」

beforeの時と同じようにHTMLでdiv要素につけたクラス名に::afterをつけて「.giji-youso::after」と書きセレクタにします。

そしてcontentプロパティの値でクォートでテキストを挟んだ書き方をすることで::beforeで指定したcontentの値が擬似要素に表示できます。

beforeで擬似要素の前にnewマーク

ここからは、CSSのbeforeとafterとcontentの使用例を紹介します。

まず初めに、上記の画像のように画像の左上に「New」というラベルを擬似要素を作ってcontentプロパティの値で表示するHTMLとCSSの書き方です。

<div class="giji-sample">
    <img class="giji-img" src="no-image.gif">
</div>

HTMLはdivで親要素を作り、画像を表示するimgタグで子要素を作り、親要素と子要素にそれぞれclass属性をつけた要素を使います。

.giji-sample {
    position: relative;
}

.giji-img {
    width: 350px;
}

.giji-sample::before {
    content: 'New';
    position: absolute;
    color: #fff;
    background-color: #E91E63;
    display: inline-block;
    padding: 5px 10px;
    top: 0;
    left: 0;
}

CSSでは、divのclass属性につけたクラス名「giji-sample」を使用し、クラスセレクタにします。このクラスセレクタの中でposition: relativeにします。これは擬似要素の配置をコントロールできるようにするための記述です。

そして要素の前に擬似要素を作り出す「before」を「.giji-sample::before」と記述しセレクタを作り、作り出した擬似要素に表示する内容をcontentプロパティを使って指定します。

またtopとleftの値を0で指定して、position: relativeを指定している親要素の左上にbeforeの擬似要素を配置できます。

そうすると画像の左上にはcontentプロパティの値に記述した文字が表示できます。このとき画像の左端からラベルがずれている場合はtopとleftで位置調整します。

beforeとafterで要素に影をつける

CSSのbeforeとafterとcontentの使用例、二個目はbeforeとafterを使って要素に影をつける場合です。

上の画像のようにピンクのボックスの下側の左右に影をつけます。

<div class="giji-sample"></div>

HTMLはdiv要素にclass属性を記述しておきます。このクラス名でCSSのbeforeとafterを指定するクラスセレクタに使います。

.giji-sample {
    position: relative;
    width: 300px;
    height: 168px;
    background-color: pink;
}

.giji-sample::before, .giji-sample::after {
    content: '';
    position: absolute;
    bottom: 10px;
    width: 40%;
    height: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
    z-index: -1;
}

.giji-sample::before {
    left: 10px;
    transform: rotate(-5deg);
}

.giji-sample::after {
    right: 10px;
    transform: rotate(5deg);
}

::beforeと::afterを同時に指定してるセレクタの記述では、contentの値を空にします。値を空にして何も表示しない代わりにbox-shadowを使い影を出現させています。

そして::beforeと::afterそれぞれ単独で指定しているセレクタでは影の位置指定をしています。transformでベンダープレフィックスのwebkitやmozが必要な場合は適宜で加えてください。

擬似要素にするCSS以外であまりよくわからない場合は上のHTMLとCSSをCodePenあたりに貼り付けて配置や角度をいじくってみると分かりやすいです。

beforeとcontentで画像を表示する

ラストはCSSのbeforeとcontentで画像を表示する場合です。

上の画像はCSSのbeforeとcontentで画像を表示して、afterはcontentを空にして画像右下に影をつけました。この画像を表示するためのHTMLとCSSは以下です。

<div class="giji-sample"></div>

HTMLは要素にCSSのbeforeとafterで影をつけたときと同じものを使用しています。

.giji-sample {
    position: relative;
    width: 400px;
    height: 266px;
}

.giji-sample::before {
    content: url(../images/tes-img.jpg);
}

.giji-sample::after {
    content: '';
    position: absolute;
    bottom: 10px;
    width: 40%;
    height: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
    z-index: -1;
    right: 10px;
    transform: rotate(5deg);
}

上記のCSSのセレクタで.giji-sample::beforeの記述がありますが、このセレクタで画像を表示しています。

画像表示する記述のポイントはcontentプロパティの値です。

contentプロパティの値で「url()」を記述してカッコの中で表示する画像のパスを指定します。

擬似要素のafterでは、beforeで表示した画像に影をつけるための記述をしていますが、この記述は先述したbeforeとafterで影をつけたCSSのafterの記述だけをまとめて記述しただけです。

CSSのbeforeとafterの擬似要素に画像を表示するには、contentの値でurl()のカッコの中に使用したい画像のパス指定をして表示するということになります。