CSS – ::before / ::afterで複数の要素を作る

::before / ::afterとは

::before / ::afterとはCSS擬似要素といって指定した特定の要素部分にスタイルを設定できるもので、::beforeは指定した開始タグの後ろに、::afterは指定した終了タグの前に追加コンテンツを設定できる擬似要素になります。

ブロック要素またはインライン要素を作る場合

テキスト情報を追加するのではなく、ブロック要素やインライン要素のみを出力させたい場合はpositionプロパティを使います。

例

div{
	position:relative;
	width:100px;
	height:100px;
	background:gray;
}
div::before{
	content:'';
	position:absolute;
	width:100px;
	height:100px;
	left:10px;
	top:10px;
	background-color: #FFBA10;
}
div::after{
	content:'';
	position:absolute;
	left:20px;
	top:20px;
	width:100px;
	height:100px;
	background-color: #4287f5;
}

ここで気を付けるべきポイントは::before / ::afterにcontent:'';を入れることです。これがないと::before / ::afterの要素が出力されません。

また出力される要素の順番は一番下にメインの要素、その上に::before要素、そして一番上に::after要素となります。

NG例

下記のコードのようにcontent'';内にHTMLタグを入れてもうまく出力されません。<span class="sample_class"></span>とテキストとして出力されます。

div::before{
	content:'<span class="sample_class">';
}
div::after{
	content:'</span>';
}

テキストコンテンツの場合

HTML

<p>sample text.</p>

CSS

p::before{
	content:'〝';
	color:gray;
}
p::after{
	content:'〟';
	color:gray;
}

結果

〝sample text.〟

下記の画像のように<p>〜</p>要素内のコンテンツの前後にを追加できる仕様となっています。

構文

CSS3では擬似クラスと擬似要素を区別するため::が導入されました。どちらも動作しますが::がいいでしょう。

::before / ::afterを使う際は必ず両方用意する必要はなく、::beforeだけといったことも可能です。

/* CSS3 */
p::before{
	content:'';
}
p::after{
	content:'';
}


/* CSS2 */
p:before{
	content:'';
}
p:after{
	content:'';
}