【CSS】疑似要素before・afterが効かない原因はcontentにあり!マンガでわかるホームページ作成ホームへ【CSS】疑似要素before・afterが効かない原因はcontentにあり!2020年02月27日CSSのbefore・afterが効かない原因を説明します。ないbefore・afterを使うとき、CSSの「content」は必須です。「content」がないとbefore・afterは使えません。指定しないからといって削除していいものではないのです。""」を追加before・afterはしばしば装飾のために使われます。10px;}備考:contentとは「content」とはbefore・afterのテキストを指定するためのCSSプロパティです。beforeやafterは本来その前後にテキストを付与する要素であり、そのテキストは「content:""」で指定します。「""」の中にテキストを記述します。class="rei">テキスト</div>表示結果テキストCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。img,br,input,select,textareaにはbefore・afterは使えないこれらの要素には残念ながらbefore・afterが使えません。下記ではimgタグ,brタグ,inputタグ,selectタグ,textareaタグにbeforeにてcontent:"before"を指定していますが、文字が表示されません。このbefore・afterを利用これらの要素にどうしてもbefore・afterを使いたいときは要素の外側にdivやli、tdなどbefore・afterを使えるhtmlタグを加え、その要素のbefore・afterを利用します。「inputのボタンにbefore,afterで装飾をしたいのにできない!?」inputボタンに疑似要素(before,after)を使う方法を解説します。以下に紹介するものは実際のところbefore・afterは効いています。期待した表示になっていないのでbefore・afterが効いていないように見えるというものです。before・afterを装飾として利用しているという前提で説明します。成功例まず、以下のようにbefore・afterを装飾として使いたいとします。うまく表示できれば「テキスト」の前に「■」が表示されます。この「■」がbeforeです。5px);}上記が成功例です。CSSが一つ足りないだけで崩れることがあります。absoluteで位置調整するのが一般的です。absoluteを指定しないと位置調整できません。relativeがないといけません。「positionの使い方がよくわからない」という方は以下の記事を参考にしてみてください。positionの書き方【実装例・デモとあわせて紹介】CSSのpositionの書き方をstatic,relative,absolute,fixed,stickyの使用例とともに説明します。absoluteを指定しているのにwidthまたはheightを指定しないとそれらが0pxになります。幅・高さがないと見えません。それぞれ指定しましょう。失敗4.色(backgroundなど)がないテキスト色を指定しないと透明なので見えません。あるのにないように見えます。上記にも当てはまらない場合before以外が原因かもしれません。↓こちらの記事を参考にしてみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読むまとめbefore・afterが効かないときは以下を確認してみてください。relativeがないwidthまたはheightがない色(backgroundなど)がない以上、CSSのbefore・afterが効かない原因はcontentにあり!でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。