cssで『:before』『:after』を使った擬似要素が思うように表示できない場合の

初心者が見落としがちなポイントを４つピックアップし、理由と対処法をご紹介します

１.contentの指定をしていない

これは初歩ではありますが最初は見落としやすいポイントかと思います。

:before擬似要素で背景色を指定してみましょう

/* NG */

p::before{
  background: #000;
}

これでは、何も表示されません。テンパりますね

正しくはこうです。

/* OK */

p::before{
  content: "";
  background: #000;
}

:beforeからcontentの指定までをテンプレとして覚えておくといいかと思います。

2.擬似要素の使えない要素

例えば、「リンクを目立たせたい！！」

/* NG */

link::before{
  content: "★";
  color:red:
}

はい、これでは一生陰キャです。目立つことは無理そうですね。

void要素と呼ばれる、閉じタグのない要素は擬似要素を使うことができません。

void要素の一覧

上記の要素を覚えておきましょう。

3.displayの指定をしていない

では次の書き方はどうでしょう。

/* NG */

p::before {
  content: "★";
  color:red:
  width: 20px;
  height: 20px;
}

運が良ければ見えます。

正しくはこうです。

/* OK */

p::before {
  content: "★";
  color:red:
　display: inline-lock;
  width: 20px;
  height: 20px;
}

擬似要素は初期値のままだと、display : inlineになっています。

なので擬似要素が、隠れてしまい見えない場合があります。

表示する位置は、positionを使って調整してみましょう。

４.親要素のpositionを指定していない

アイコンの位置を調整したい！！

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

/* NG */

p::before {
  content: "★";
  position: absolute;
  top: 10px;
  left: 10px;
}

topもleftも指定したのに、左上の端っこから動いてくれない…

この場合は擬似要素をつけた要素（親要素）にposition: rerative;をつける必要があります。

/* OK */

p {
  position: relative; 
}

p::before {
  content: "★";
  position: absolute;
  top: 10px;
  left: 10px;
}

以上が擬似要素を使う際、初心者の見落としがちなポイントとなります。

どれもとてもシンプルで基本的なことですが、だからこそ見落としやすいです。

擬似要素を使用するときのチェック項目として覚えておくといいかもしれません。