CSSの疑似要素::beforeや::afterを1分で理解する【ワードプレスのカスタマイズ】

2021年6月19日

ワードプレスをCSSでカスタマイズするとき、よく見るのが::beforeや::afterです。

アイコンなどの装飾を見出しやリストの頭につけたり、ボタンの装飾やボックスの横幅制御など、利用方法は幅広くあるので、ぜひとも知っておきたいCSSですね。

この記事でわかること

・::beforeや::afterとは何なのか？その作用を1分で理解する
・::beforeや::afterの使用事例を知る

これであなたも疑似要素の使い手です。

1. まずは1分で知る疑似要素の作用
2. 疑似要素の応用例
3. まとめ

まずは1分で知る疑似要素の作用

::beforeや::afterといった疑似要素はセレクターに追記して、contentプロパティと併用します。

（セレクター）::before {content:"（挿入したいコンテンツ）";}

作用としては、contentプロパティに記述した内容を<span>タグで挿入するのと同じことになります。

::beforeはspanタグを要素の頭に挿入したのと同じ作用
::afterはspanタグを要素の最後に挿入したのと同じ作用

※::beforeを:before、::afterを:afterと記述しても同じです。CSSのversion3以前はコロン１つが標準でしたが、現在ではコロン２つが標準です。

簡単なHTMLの例をあげて説明しましょう。

HTML

<div class="box">
    明日は明日の風が吹く
</div>

ブラウザ表示

明日は明日の風が吹く

これに疑似要素::beforeとccontentプロパティを使ってCSSを記述してみます。

CSS

.box::before {
    content:"格言:";
}

ブラウザ表示

格言：明日は明日の風が吹く

これは次のように<span>格言：</span>を挿入したのと同じです。

CSS

<div class="box">
    <span>格言：</span>
    明日は明日の風が吹く
</div>

ブラウザ表示

格言：明日は明日の風が吹く

spanタグについての詳しい説明は、こちらの記事を参照してください。

HTMLブロックとインライン要素の違いとは？WPカスタマイズの必須知識

ワードプレスは管理画面のテーマカスタマイザーである程度のデザイン設定ができますが、カスタムCSSを ...

https://web-children.com/2021/05/23/html-block-and-inline/

::afterを疑似要素に指定した場合は、spanタグを要素の最後に挿入したのと同じです。

CSS

.box::before {
    content:"格言:";
}
.box::after {
    content:"！！";
}

ブラウザ表示

格言：明日は明日の風が吹く！！

疑似要素の応用例

見出しの頭のアイコンをつける

よくあるのが、見出しやリストの頭にアイコン画像を挿入することです。

例えば、このウェブチルサイトの見出し２には次のようなCSSでアイコンを挿入しています。

.single .post h2 {
	color :#2B2C42;
	position: relative;
	background: #EEF9FF;
	padding: 0.25em 0.5em;
	border-bottom: double 0.3em #91C4C7;
	border-top: double 0.3em #91C4C7;
	border-left: solid 2em #91C4C7;
}

.single .post h2:before {
	display: inline-block;
	font-family: "Material Icons";
	content: "\e3c9";
	position: absolute;
	padding: 0em;
	color: #2B2C42;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

簡単に解説すると、

・セレクター.post h2に::beforeを指定して疑似要素を挿入。

・display:inline-blockとしてインラインブロック要素に変換（後にtransformプロパティを使用するため念のため。変換しない場合は、spanと同じインライン要素となります）。

・font-familyでGoogleアイコンを指定してからcontentでアイコンの記号を指定。

・position:absoluteでアイコンの位置をleftとtopで調整できるようにする（その前に.post h2にposition:relativeをかけてあることが前提）。

・transformプロパティでアイコンが高さ方向の中央になるよう調整（transformプロパティはブロック要素ででないと作用しないことがあるので先にインラインブロック化しておいた）。

見出しについてのCSSについてはこちらの記事参照

ワードプレスLuxeritas　カスタムCSSで見出しをデザイン

テーマLuxeritasは高機能ですがカスタムしやすいようにデザインはシンプルなつくりになっています。見 ...

https://web-children.com/2021/01/06/luxeritas-custom-headlin...

インライン要素とブロック要素についてはこちらの記事参照

HTMLブロックとインライン要素の違いとは？WPカスタマイズの必須知識

ワードプレスは管理画面のテーマカスタマイザーである程度のデザイン設定ができますが、カスタムCSSを ...

https://web-children.com/2021/05/23/html-block-and-inline/

positionプロパティについてはこちらの記事参照

ワードプレスで初心者が覚えておくべきpositionプロパティの２つの使い方

CSSのpositionプロパティは、ひと言でいうと『要素（コンテンツ）の位置を決める』プロパティです。ワ ...

https://web-children.com/2021/06/16/css-position/

リストの頭にアイコンを使う

こんな風にリストの頭にアイコンを付けます（下記例ではピンクのチェックアイコン）。

リスト１
リスト２
リスト３

ul.check-list {
	list-style: none;
	width: 90%;
	margin: 0 auto;
	border: solid 3px #91C4C7;
	border-radius: 10px;
	padding: 0.5em 1em;
}
ul.check-list li {
	font-size: 1.6rem;
	margin-bottom: 1em;
}
ul.check-list li:last-child {
	margin-bottom: 0;
}
ul.check-list li:before {
	font-family: "Material Icons";
	content: "\e876";
	color: #ffc0cb;
        font-weight: 600;
	letter-spacing: 0.5em;
}

これも見出し同様、アイコンにはGoogleアイコンを使用しています。ただ見出しと違って、ブロック要素に変換する必要はなくインライン要素のままで使用しています。