CSSで疑似要素before・afterが効かない原因と解決策

疑似要素before・afterとは？

疑似要素とは、CSSを使ってHTMLの記述を変更せずに、特定の状態や位置にスタイルを追加できる指定方法です。疑似要素にはいくつか種類があり、beforeとafterは特によく使われます。

beforeは、指定した要素の直前にコンテンツを追加します。たとえば、見出しの前にアイコンを表示したり、ちょっとした装飾を加えたりするのに便利です。

div::before{
    content:"先頭: ";/* 要素の先頭に「先頭: 」というテキストを追加 */
}

一方、afterは、指定した要素の直後にコンテンツを追加します。文章の最後に引用符を付け加えたり、区切り線を表示させたりする際に役立ちます。

div::after{
    content:"（続き）";/* 要素の末尾に「（続き）」というテキストを追加 */
}

beforeとafterを使うことで、HTMLを直接編集しなくても、CSSだけでデザインの幅を広げられます。そのため、Webサイトのメンテナンスがしやすくなるのも利点です。

疑似要素before・afterが効かない8つの原因と解決策

beforeやafterが効かない場合、以下の7つが主な原因として考えられます。

1. contentプロパティが指定されていない
2. contentが空の場合にdisplayとサイズ指定がされていない
3. positionプロパティが設定されていない
4. 疑似要素に閉じタグがない要素を指定している
5. 疑似要素が他の要素に隠れてしまっている
6. 疑似要素が重複している
7. 動的に疑似要素を追加している
8. CSSの記述ミスをしている

この後、それぞれの解決策を紹介していきます。beforeやafterを使っているのにうまく表示されないときは、ぜひチェックしてみてください。

1. contentプロパティが指定されていない

beforeやafterを使う上で、最も基本的なルールは、contentプロパティを必ず指定することです。contentプロパティは、疑似要素として挿入する内容を指定するものです。

contentプロパティを記述しないと、beforeやafterは表示されません。もし、beforeやafterが効かない場合は、まずcontentプロパティが記述されているかを確認してください。

div::before {
  content: "※"; /* 「※」マークを要素の先頭に追加 */
}

contentプロパティには、テキストだけでなく、画像やカウンターなども指定できます。

div::before {
  content: url('../image.jpg'); /* image.jpegの画像を要素の先頭に追加 */
}

beforeやafterを装飾目的で使用する場合（例えば、背景色を設定したり、ボーダーを表示したりする場合）でも、下記のように、空の文字列を指定する必要があります。

.example::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: blue; /* 幅10px、高さ10pxの青い四角形を表示 */
}

2. contentが空の場合にdisplayとサイズ指定がされていない

contentプロパティに空の文字列(content:””;)を指定する場合、見落としやすい点が2つあります。それは、displayプロパティとwidthやheightなどのサイズ指定が必要なことです。

beforeやafterで追加される内容は、標準でインライン要素として扱われます。このとき、contentが空の場合は、疑似要素の領域が自動的に確保されません。

特に、beforeやafterを装飾目的で使用する場合（例えば、背景色を設定したり、ボーダーを表示したりする場合）は、blockまたはinline-blockを指定し、さらにwidthとheightでサイズを指定することで、疑似要素が表示されるようになります。

.example::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: blue; /* 幅10px、高さ10pxの青い四角形を表示 */
}

3. positionプロパティが設定されていない

positionプロパティは、要素の配置方法を指定するものです。beforeやafterを使って要素を配置する場合、positionプロパティの設定が必要になります。

positionプロパティを設定しないままだと、top、right、bottom、leftといったプロパティで位置を調整できません。そのため、beforeやafterが表示されなかったり、意図しない場所に表示されたりすることがあります。

positionプロパティには、position、relativeなどさまざまな値があります。そのため、beforeやafterの配置方法に合わせて、適切な値を設定することが必要です。

下記の例では、.boxクラスの要素に対して、左上から10pxの位置に赤い四角形が表示されます。

.box::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: red;
}

4. 疑似要素に閉じタグがない要素を指定している

HTMLの要素には、閉じタグが必要なものと、不要なものがあります。例えば、<div>や<p>は閉じタグが必要ですが、<br>や<hr>、<img>、<input>は不要です。

beforeやafterは、閉じタグがある要素にしか指定できません。閉じタグがない要素に指定しても、beforeやafterは表示されないため、注意が必要です。

5. 疑似要素が他の要素に隠れてしまっている

beforeやafterが表示されない原因として、他の要素に隠れてしまっているケースもあります。この場合は、要素の重なり順序を制御するz-indexプロパティが関係していると考えられます。

z-indexプロパティは、数値で要素の重なり順序を指定します。数値が大きいほど、手前に表示されます。もし、beforeやafterが他の要素に隠れてしまっている場合は、z-indexプロパティを使って、beforeやafterを前面に表示させるように調整してみましょう。

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒色 */
  z-index: 1; /* 他の要素よりも手前に表示 */
}

6. 疑似要素が重複している

同じ要素に対して、複数のbeforeやafterを指定すると、意図しない表示になることがあります。例えば、同じ要素に対して複数のbeforeを指定した場合、後に記述したbeforeが優先されます。

CSSのコードを整理し、原則として1つの疑似要素に対して1回だけスタイルを記述するように心がけましょう。

7. 動的に疑似要素を追加している

jQueryなどのJavaScriptライブラリを使って、動的にCSSを操作しても、beforeやafterといった疑似要素を直接指定することはできません。

下記のように、beforeやafterを指定できないため、注意が必要です。

$(function(){
  $('.example::after').css({
    'content': '""',
    'position': 'relative'
    'background': 'lightblue'
  });
}

8. CSSの記述ミスをしている

CSSの記述ミスは、beforeやafterが効かない原因としてよく見られます。

たとえば、プロパティ名のスペルミス、コロン（:）やセミコロン（;）の付け忘れ、括弧（{}）の閉じ忘れ、全角入力、全角スペースなど、ちょっとしたミスでCSSが正しく解釈されなくなることがあります。

CSSコード全体を確認し、誤りがないかチェックしてみましょう。

まとめ

もし、beforeやafterでうまく表示されない場合は、この記事を参考に、原因を特定し、解決策を試してみてください。beforeやafterを使いこなして、より魅力的なWebサイトを作りましょう。