【CSS】「::before」と「::after」疑似要素にCSSが効かないときの対処方法

CSSの「::before疑似要素」、「::after擬似要素」は様々な場面で使える便利な機能です。

しかしながら、スタイルシートを記述している途中で「疑似要素が思ったように反映されない！」という状況にもしばしば遭遇すると思います。
今日はそんなときに確認するべきチェックポイントを紹介します。

contentプロパティを指定しているか？

疑似要素が表示されない理由で、最も多いのはcontentプロパティの設定を忘れているケースだと思います。

例えば以下のようなコードはNGです。

.sample::before {
	background-color:#333;
}

contentプロパティを忘れずに指定しましょう。

.sample::before {
	content:"";
	background-color:#333;
}

擬似要素に「position:absolute;」を指定したい場合は、その親要素に「position:relative;」を効かせる必要があります。

.sample{
	position:relative;
}
.sample::before {
	position:absolute;
}

::before疑似要素、::after疑似要素は、<br> <input> <img> などの空要素には使うことができません。

空要素（void要素）とは？

終了タグが存在せず、開始タグのみで記述される要素のこと。
br、hr、img、input、sourceなどがそれにあたります。

疑似要素は1つの要素に対して「::before」、「::after」のそれぞれ1個ずつ、計2個しか指定できません。

.sample::before {
	content:"あいうえお";
}
.sample::before {
	content:"かきくけこ";
}
.sample::after {
	content:"さしすせそ";
}
.sample::after {
	content:"たちつてと";
}

CSSは前のコードが後ろに書いたコードで上書きされるので、上記の例では「かきくけこ」と「たちつてと」の2つが出力されることになります。

前後の重なり順を指定するz-indexプロパティは正しく指定されていますか？
z-indexを効かせるには「positionの値がstatic以外」でないといけません。

.sample::before {
	position:relative;
	z-index:99;
}

例えば、擬似要素にtransformを効かせたい場合。

疑似要素はデフォルトではインライン要素（display:inline;）として扱われていますが、これを「inline」以外の他の値にする必要があります。

疑似要素をtransformで動かしたい場合はdisplayの値をinline以外にしましょう。

以上。お疲れさまでした！