【CSS】疑似要素before・afterが効かない原因はcontentにあり！

2020年02月27日

CSSのbefore・afterが効かない原因を説明します。

効かない原因1. content がない
- 解決方法：「content: ""」を追加
- 備考：contentとは
効かない原因2. img,br,input,select,textareaにはbefore・afterは使えない
- 解決方法：divなどを加えこのbefore・afterを利用
効かない原因3.他のCSSの問題
その他
まとめ

効かない原因1. content がない

before・afterを使うとき、CSSの「content」は必須です。「content」がないとbefore・afterは使えません。指定しないからといって削除していいものではないのです。

解決方法：「content: ""」を追加

before・afterはしばしば装飾のために使われます。

文章が不要なときは「""」の中をカラにして「content: ""」と指定します。

失敗例

div::before{
    width: 10px;
}

成功例

div::before{
    content: "";/*必須*/
    width: 10px;
}

備考：contentとは

「content」とはbefore・afterのテキストを指定するためのCSSプロパティです。

beforeやafterは本来その前後にテキストを付与する要素であり、そのテキストは「content:""」で指定します。「""」の中にテキストを記述します。日本語でもOKです。

content使用例

ソース

<style>
.rei::before{
    content: "前に表示されるよ";
    color: red;
}
.rei::after{
    content: "後に表示されるよ";
    color: blue;
}
</style>
<div class="rei">テキスト</div>

表示結果

テキスト

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

効かない原因2. img,br,input,select,textareaにはbefore・afterは使えない

これらの要素には残念ながらbefore・afterが使えません。

下記ではimgタグ,brタグ,inputタグ,selectタグ,textareaタグにbeforeにてcontent:"before"を指定していますが、文字が表示されません。

<div class="not">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" width="100">
    <br>
    <input type="text" value="inputタグ">
    <select><option>selectタグ</option></select>
    <textarea>textareaタグ</textarea>
</div>
<style>    
    .not ::before{
        content:"before";
    }
    .not{
        border: 1px solid #CCC;
        background: #f2f2f2;
        padding: 10px;
        margin: 20px 0;
    }
</style>

解決方法：divなどを加えこのbefore・afterを利用

これらの要素にどうしてもbefore・afterを使いたいときは要素の外側にdivやli、tdなどbefore・afterを使えるhtmlタグを加え、その要素のbefore・afterを利用します。

【html/CSS】inputボタンに疑似要素(before,after)を使う方法

「inputのボタンにbefore,afterで装飾をしたいのにできない!?」inputボタンに疑似要素(before,after)を使う方法を解説します。

この記事を読む

効かない原因3.他のCSSの問題

以下に紹介するものは実際のところbefore・afterは効いています。

しかし、期待した表示になっていないのでbefore・afterが効いていないように見えるというものです。

before・afterを装飾として利用しているという前提で説明します。

成功例

まず、以下のようにbefore・afterを装飾として使いたいとします。

うまく表示できれば「テキスト」の前に「■」が表示されます。

この「■」がbeforeです。

テキスト

html

<div class="example">テキスト</div>

CSS

.example{
    border: 1px solid #999;
    padding: 10px 10px 10px 30px;
    position: relative;
}
.example::before{
    content: "";
    width: 10px;
    height: 10px;
    background: #333;
    position: absolute;
    left: 10px;
    top: calc(50% - 5px);
}

上記が成功例です。
CSSが一つ足りないだけで崩れることがあります。