擬似要素（::before ::after）が効かない！！！

頻出なのに毎回調べては忘れてしまう問題、擬似要素が効かない問題！！！！

初歩的なことですが、よく忘れてしまう問題なので覚書メモです。

一番最初に確認して欲しい点として、

<br>
<img>
<hr>
<input>
<select>

上記の人たちに擬似要素をつけようとしてはないか...
（私の場合ほぼほぼこれで解決となります。外側にdivをつけて解決！）

特に<img>に擬似要素をつけたいことが多く、
ここを重点的に覚えておきたいがためだけに記事を書きました。

<br>,<img>,<hr>,<input>,<select>に擬似要素は効きません！！

---

他の救済方法として、下記も記載しておきます。

• content: "";でcontentプロパティを指定する
• display: block; or display: inline-block;にする
• 親要素にposition: relative;指定をする
• z-indexを確認する

上記を確認すれば、大抵は擬似要素が効くようになります。
img要素には気をつけましょう。。。