擬似要素「before、afterが表示されない」解決法

今回は、擬似要素「before、afterが表示されない」の解決法を紹介します。

擬似要素 before、after の解決法は「３つ」あります。

１：「content=””;」が必要
２：<img> <input> <br>には使えない
３：「display: block」「display: inline-block」にする

それでは、詳しく説明します。

文字化けします

＜コピー、ペーストすると文字化けします＞

このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。

十分ご注意ください。

擬似要素「before、after」には、「content=””;」が絶対必要

擬似要素before、afterを表示させるには「content=””;」が必要です。

特に、擬似要素「before、after」で、バックグラウンドだけ利用する時など忘れがちです。

擬似要素before、afterは、単一のhtml要素「<img>　<input>　<br>」などには使えません。

＜使える＞

○　<p></p>
○　<div></div>
○　<section></section>

＜使えない＞

×　<img>
×　<input>
×　<br>

擬似要素「before、after」のデフォルトは「display: inline」です。

「display: inline」では「バックスクリーンは、文字の部分だけ」に入ります。文字がないとバックスクリーンは、表示されません。

なので

バックスクリーン、バックスクリーン画像だけで使うなら「display: inline-block」「display: block」どちらかにする必要があります。

＜擬似要素「before、after」でのヨコ並び、タテ並び＞

１：ヨコに並べたいときは「display: inline-block」
２：タテに並べたいときは「display: block」

擬似要素「before、after」は、以下の３つに注意してください。

１：「content=””;」が必要
２：<img> <input> <br>には使えない
３：「display: block」「display: inline-block」にする

以上、
擬似要素「before、afterが表示されない」時の解決法（HTML,CSS）
の話でした。

ありがとうございました。