CSSで擬似要素が表示されない原因と解決策

2022.06.24
HTML&CSS

CSSの擬似要素before、afterを使用して作成した要素がうまく表示されなかった時に、確認するポイントと解決策の備忘録です。

contentプロパティを指定していない

疑似要素を表示するには、contentプロパティの設定が必須です。

div::before{
  content: "表示するテキスト";
}

擬似要素を使用してアイコンを表示する場合など、テキストの表示が必要ない時は、値を設定していない「content: “”;」を使用します。

div::before{
  content: "";
}

インライン要素になっている

疑似要素は、インライン要素なのでそのままではwidth、height、上下のmargin、transformなどの指定が効きません。
そのため、width、heightで大きさを指定した疑似要素が表示されない場合は、displayの設定を「display: block;」もしくは、「display: inline-block;」にする必要があります。

div::before {
  content: "";
  width: 100px;
  height: 100px;
  margin-top: 5px;
  display: block;
}

親要素にpositionを指定していない

疑似要素に「position: absolute;」を指定している場合、親要素に「position: relative;」を指定していないと、意図した箇所に表示されていない可能性があります。

div {
  width: 100px;
  height: 100px;
  position: relative;
}

div::before {
  content: "表示するテキスト";
  position: absolute;
  top: 0;
  left: 0;
}

上記の例では、親要素にあたるdivに「position: relative;」を指定しています。

他の要素と重なっている

「z-index」を指定していない状態では、疑似要素は親要素の上に配置されます。しかし、他の要素に重なって見えなくなっている可能性がある場合、一度「z-index」に大きな値を指定して他の要素と重なっていないか確認します。

div::before {
  content: "表示するテキスト";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

疑似要素が重複している

擬似要素は、1つの要素に対して「before」と「after」を1つずつしか指定ができません。
同じ要素に対し、「before」や「after」が2個以上指定された場合、CSSの記述上優先される値のみ反映されます。

div::before {
  content: "テキストその１";
}

div::before {
  content: "テキストその２";
}

上記の例では、下に記述された「テキストその２」が反映されます。

CSS上だけではなく、外部のjsファイルを読み込んで動的に疑似要素が追加された場合も重複する可能性があるため注意が必要です。

疑似要素が使えない要素に指定している

疑似要素は、<br>や<input>などの閉じタグの無い要素には使うことができません。
下記のような、「void要素（閉じタグの無い要素）」に擬似要素を設定している場合は変更します。

<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<param>
<source>
<track>
<wbr>

上記のポイントで改善されない場合は、CSSのクラスの指定やコードの書き間違いがないか基本的な点を確認します。