どうも7noteです。疑似要素が効かない時の確認事項（永久保存版）

「疑似要素が思っている箇所に反映されない！！」

という悩みはあるあるじゃないかなと思っている今日この頃です。

そこで、考えられるほぼ全ての原因をまとめました！
たぶん考えられる全パターンあると思います。永久保存版としてお使いください。

疑似要素が表示されない時に確認する7つの事

p::before {
  content: ""; /* ←宣言してますか？ */
}

/* NG例 */
p::before {
  content: "";
  background: #000;
  width: 20px;
  height: 20px; /* ←効かない */
  margin-top: 5px; /* ←効かない */
}

疑似要素はインライン要素扱いになります。そのためheight(高さ指定)や上下のmarginは効きません。
効かせるためにはdisplay: inline-block;を指定しましょう。

/* OK例 */
p::before {
  content: "";
  background: #000;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  display: inline-block; /* ←必要 */
}

疑似要素にposition: absolute;を指定している場合、
基準となる親要素(基本的には疑似要素を付けた要素)にposition: relative;を指定していないと、変なところに表示されていることが多いです。

（大体ページの一番左上に出てたり。。。）

/* OK例 */
p {
  position: relative; /* ←忘れやすいので注意 */
}

p::before {
  content: "ここにいる .";
  position: absolute;
  top: 0;
  left: 0;
}

<br>や<input>など閉じタグの無い要素には疑似要素を使うことができません。
これらの要素を「void要素」と言います。

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

↓重複してしまっている例↓

index.html

<p class="wani">こんばん</p>

style.css

p::after {
  content: "わんこそば";
}

.wani::after {
  content: "わに";
}

結果↓
こんばんわに

このように、後者で指定した「.wani::after」の方がcssの優先順位が高いので、「わに」が表示されました。

「beforeかafterは1つの要素に1個ずつのルールです！」

5番に近いですが、css上ではなく外部のjsファイルを読み込んで動的に疑似要素が生成される際があります。

検証ツール（F12）等を使い、既に疑似要素が入っていないか確認してみましょう。

（もしくは疑似要素と同じ背景色の上に配置していないか）

z-indexや、要素の書き順の影響で後ろに隠れていませんか？
z-indexに大きな数字を指定して確認してみましょう。
もしくは背景色に同化して見えないだけかも！

どこかcssの書き方が間違っている可能性が高いかと、、、
コロン(:)の数が違うとか、
セレクタの指定が間違っているとか。。。？？

疑似要素はとても便利でいろいろな使い方ができる分、細かくいろいろ指定が必要な場合が多いのでよく原因不明になりやすいです。
困った時は原因の追及から丁寧にやれば、すぐに解決できると思うのでこの記事を読んで作業時間が短くなれば嬉しいです。