ホーム(記事一覧)へ

CSSのbefore・afterが効かない原因はcontentにあり!

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

効かない原因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>

表示結果

テキスト

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

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

下記ではimgタグbrタグinputタグ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="テキスト">
    <textarea>テキスト</textarea>
</div>
<style>    
    .not ::before{
        content:"before";
    } 
</style>

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

これらの要素にどうしてもbefore・afterを使いたいときは要素の外側にdivやli、tdなどbefore・afterを使えるhtmlタグを加え、その要素の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が一つ足りないだけで崩れることがあります。

失敗1.beforeにposition: absoluteがない

テキスト

厳密にはposition: absoluteは必須ではありませんが、例のように装飾として使うときはposition: absoluteで位置調整するのが一般的です。

position: absoluteを指定しないと位置調整できません。

失敗2.親にposition: relativeがない

テキスト

失敗例2のようにbeforeにposition: absoluteを使う場合その親にposition: relativeがないといけません。

 

「positionの使い方がよくわからない」という方は以下の記事を参考にしてみてください。

失敗3.widthまたはheightがない

テキスト

position: absoluteを指定しているのにwidthまたはheightを指定しないとそれらが0pxになります。

幅・高さがないと見えません。それぞれ指定しましょう。

失敗4.色(backgroundなど)がない

テキスト

色を指定しないと透明なので見えません。
あるのにないように見えます。

その他

上記にも当てはまらない場合before以外が原因かもしれません。
↓こちらの記事を参考にしてみてください。

まとめ

before・afterが効かないときは以下を確認してみてください。

  1. content: ""がない
  2. imgタグbrタグinputタグtextareaタグである
  3. beforeにposition: absoluteがない
  4. 親にposition: relativeがない
  5. widthまたはheightがない
  6. 色(backgroundなど)がない

以上、CSSのbefore・afterが効かない原因はcontentにあり!でした。

関連記事