【擬似要素が表示されない！？】10のチェック項目と解決方法、CSSの記述も教えます。

「擬似要素」って、よく使うけど意外と設定項目多いんですよね、、

なんで、今回は、

　

擬似要素なんで表示されないの〜〜！？

って方のために、解決方法とチェック項目教えます！

クリブロ

僕も初心者のときは、何度も悩まされたので、この記事でしっかりとまとめていきます！

では、早速いきましょう！

擬似要素の表示例

擬似要素を使うと下のように、文字の後ろや最後にCSSで装飾がつけられます。

こちらのコード例は下記の通りです！

/* 親要素 */
    p.line {
        position: relative;

        line-height: 40px;
        font-size: 40px;
    }

/* 擬似要素 */
    p.line::before {
        position: absolute;
        display: inline-block;
        content: "";
        height: 40px;
        width: 8px;
        top: 0;
        left: -16px;
        background-color: #1e88a8;
    }

こちらも参考にしながらチェック項目を見ていきましょう！

擬似要素が表示されない時のチェック項目【10項目】

1. まずは、CSSがしっかりとリンクされているか？

超初歩的ですが、そのCSSが、今反映しようとしているHTMLにしっかりリンクされているか確認しましょう！

意外と見落としてる時もあるので、気をつけましょう

ここが大前提となって、当たり前ですが、もしCSSが反映されていなければ何しても表示されません！

クリブロ

まずは順番に原因を確認・解決することが大切だよ！

CSSが反映しているかどうか確認する際は、検証ツールで確認したり、
同じCSSでbackground-color: #000などわかりやすいCSSで反映するか、を確認しましょう！

2. 親要素に「position: relative;」が指定されているか

擬似要素部分は基本的にposition: absolute;を指定することが多いと思いますが、
その際に、親要素は必ず「position: relative;」を指定しましょう！

そうしないと、ページ全体の左上とか、一番下とか意味のわからないところに配置される可能性が高くなります。

/* 親要素 */
    p.line {
        position: relative;　/* ←意外と忘れがち */
    }

/* 擬似要素 */
    p.line::before {
        position: absolute;　/* ←親要素を基準に絶対配置 */
    }

3. contentの記述はあるか

擬似要素の表示に必ず必要なのが、contentプロパティの記述。

逆にいうと、こちらは:before擬似要素および、:after擬似要素のみに適用可能なプロパティです。

それゆえに、忘れやすい記述でもありますね！

/* 擬似要素 */
    p.line::before {
        content: "";　/* ←擬似要素のみ適用のプロパティ、忘れずに！ */
    }

ちなみに、””のなかはテキストや画像URLを入れることも可能です！
CSSでの装飾以外でも入れられるので便利ですね。

/* テキストの場合 */
content: "テキストも入れられるよ！";　

/* 画像URLの場合 */
content: url("../images/img.png") ;

4. displayプロパティは記述しているか

擬似要素はデフォルトがインライン要素となっているので、そのままだとwidth、height、marginあたりが効きません。

そのため、display: inline-block;もしくは、display: block;を指定してあげましょう！

/* 擬似要素 */
    p.line::before {
        display: inline-block;　/* ←デフォルトだとインライン要素になってる */
        /* display: block; */　/* ←これでもOK */
    }

5. widthとheightを指定しているか

これでも表示されない場合は、widthとheightの指定を確認しましょう！

ブロック要素にして、配置しても、高さや幅の指定がなければ表示されません。

/* 擬似要素 */
    p.line::before {
        height: 40px;　/* ←なんだかんだ忘れがち */
        width: 8px;　/* ←こっちも同様に指定 */
    }

6. topやleftも指定しよう

基本的には、デフォルトでtop:0;とleft:0;が指定されるはずですが、こちらも念のためしてしてあげましょう！

他のCSSにより、上書きで影響される可能性もありますので。

もちろん、擬似要素の位置を調整するためにも必要となりますので、
top、bottom、left、rightの位置を調整するプロパティは必要に応じて、指定しましょう！

/* 擬似要素 */
    p.line::before {
        top: 0;
        /* bottomでも可 */

        left: -16px;
        /* rightでも可 */
    }

7. background-colorを指定しよう

background-colorはデフォルトで指定がないので、いくらCSSで形や位置を調整しても色がないので表示がされません。

テキストや画像の場合はなくても良いですが、おそらくCSSでの装飾で使用することが多いと思いますので、基本的には指定することになるでしょう！

意外と見逃しがちなので、ご注意を！

/* 擬似要素 */
    p.line::before {
        background-color: #1e88a8;　/* ←背景色を指定しないと表示されない */
    }

8. z-indexも確認しよう

上記のチェックをすれば大体は表示されるものですが、これでも表示されない場合はz-indexプロパティも確認いたしましょう！

position指定されている場合は、z-indexの影響も受けるので、何か他の要素の奥側に隠れている可能性もあります。

/* 擬似要素 */
    p.line::before {
        z-index: 999;　/* ←確認のためだけなら、いったん大きい数字で見てみよう */
    }

9. そもそも擬似要素が使えない要素（タグ）の可能性も！

擬似要素を追加しようとしている要素（HTMLタグ）が、そもそも擬似要素が使えないという可能性もあります。

例えば、<br>や<input>など閉じタグの無い「void要素」と言われるものは、擬似要素を使うことができません。

また実は<select>タグとかも使えないんです。

自分も一回ハマったことがあるので、気をつけてください！

よく使うけど擬似要素が使えないタグ

10.擬似要素の重複はないか

擬似要素は基本的に、1つの要素に対して:before擬似要素と:after擬似要素の各1つずつの計2個しか指定ができません。

同じ要素に対し、:before擬似要素もしくは:after擬似要素が2個以上指定されていないか確認してみましょう！

同じ要素に対して、重複して指定している例

<p class="line">クリブロ</p>

/* 擬似要素 */
    p::before {
        content: "ああああ";
    }

    .line::before {
        content: "いいいい";
    }

ちなみに上記の場合は、CSSの優先度的に後述した「.line::before」のcontent: “いいいい”;の方が反映されます。

どうでしょう、擬似要素は無事表示されましたでしょうか？

上記の10項目を確認すれば、ほぼ間違いなく表示されるはずです！

まだ反映されないよ！って方は、コロン（：）やセミコロン（；）の記述が間違ってないかや、
セレクタやプロパティの綴りが間違ってないかも確認しましょう！

最後に、困ったときに使う簡単な確認方法についてもまとめておきます！

困ったときに簡単にチェックする方法

このあたりを試してみると、CSSの反映されてなくて表示されていないのか、CSSの値が間違っているのか、位置が悪いのか、などの原因がわかりやすくなるので、オススメです！

まとめ

擬似要素はすごく便利なだけに、設定項目が多く、複雑になりがちです。

でも、順番に試していただければ問題なく表示されるはずですので、落ち着いて着実にチェックしてみてください！

慣れてしまえば、感覚で原因も突き止められるようになるでしょう！

それでは、余裕のあるコーディングライフを！