[CSS]「:before擬似要素」と「:after擬似要素」の使い方を基本からマスターするためのチュートリアル

サイト構築 -CSS

Post on:2017年7月19日

sponsorsr

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。

擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。

Understanding Pseudo-Element :before and :after

下記は各ポイントを意訳したものです。

「:before, :after擬似要素」のサポートブラウザ
「:before, :after擬似要素」は何をするのか
「:before, :after擬似要素」の使い方
「:before, :after擬似要素」の応用テクニック

「:before, :after擬似要素」のサポートブラウザ

擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。
CSS1では「:first-letter, :first-line」です。

擬似クラス、擬似要素

擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。
コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。

サポートブラウザブラウザ

「:before, :after擬似要素」をサポートするブラウザは下記の通りです。

IE8+
Firefox3.5+
Chrome
Safari4+
Opera6+

IE8+とすべてのモダンブラウザと言ってよいでしょう。

非サポートブラウザへの対応

IE7にも「:before, :after擬似要素」を利用できるようにするスクリプトです。

jQuery Pseudo Plugin

「:before, :after擬似要素」は何をするのか

簡単に説明すると、「:before, :after擬似要素」はエレメントの前と後にエレメントを追加します。
コードのイメージ的には、下記のようになります。

HTML

[html]

:before
メインのエレメント
:after

[/html]

「:before, :after擬似要素」で追加したエレメントは、実際にはHTMLのソース上には生成されません。ブラウザ上の見た目では見えますが、ソース上にはなく、フェイク（擬似）のエレメントです。

「:before, :after擬似要素」の使い方

まずは、「:before, :after擬似要素」の簡単な例から見てみましょう。
「blockquote」の前後に、「:before, :after擬似要素」で引用符を追加します。

blockquoteに引用符を追加

HTML

[html]

引用文

[/html]

CSS

[css]
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
[/css]

HTMLはblockquote要素だけで、「:before, :after擬似要素」で前後に引用符を追加しました。

続いて、少しデザインを加えた例を見てみましょう。

擬似要素をデザイン

「:before, :after擬似要素」はフェイクのエレメントですが、他のエレメントと同様にカラー・背景、サイズなどをスタイルできます。

CSS

[css]
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;

}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}
[/css]

「:before, :after擬似要素」で生成されるエレメントはデフォルトでインライン要素です。高さや幅を指定したい場合にはブロック要素として定義します。

擬似要素をブロックレベルにして、サイズを指定

CSS

[css]
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;

/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;

/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}
[/css]

「:before, :after擬似要素」で追加できるエレメントはテキストだけではありません。画像に置き換えることもできます。
画像を背景画像として表示します。

擬似要素で画像を配置

CSS

このスタイルシートで注意すべき箇所は、空のcontentプロパティの存在です。これは空でも削除しないでください。
擬似要素を使用する際、contentプロパティは必要条件で、記述が無いと動作しません。

[css]
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;

background: url(images/quotationmark.png) -3px -3px #ddd;

display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;

background: url(images/quotationmark.png) -1px -32px #ddd;

display: block;
height: 25px;
width: 25px;
}
[/css]

「:before, :after擬似要素」は他の擬似クラスと組み合わせて使用することもできます。