CSSのbefore、afterを消す方法マンガでわかるホームページ作成ホームへCSSのbefore、afterを消す方法2021年07月05日CSSにおいてbefore、afterは非常に便利でよく使う技の一つです。スマホのとき解除したい、消したくても意外とその方法がわからないのではないでしょうか?CSSのbefore、afterの消す方法を解説します。【基礎】before、afterとはCSSにおけるbefore,afterとは「追加要素」のようなものです。html上は存在しない要素をCSSの力で存在させることができます。before,afterは基本的にインライン要素(文字)で、beforeは前に、afterは後ろにつきます。before,afterをブロック要素やposition:absoluteで装飾として使うこともあります。下記はbefore,afterを利用した例です。html上にない文字をCSSで存在させていることがわかります。class="example">本文</div>さて、下記より本題のbefore、afterの解除方法について3種類紹介します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法1】content:noneを指定するcontentはbefore,afterを指定する際に絶対に必要なCSSです。これを指定しないとbefore,afterは使えません。【CSS】疑似要素before・afterが効かない原因はcontentにあり!CSSにおいてちょっとした装飾をするときbefore・afterを使うとhtmlコードをシンプルにできます。したことで効かなくなることがあります。CSSのbefore・afterが効かない原因を、失敗例を提示して説明します。この記事を読む同じように「content:none」を指定するとbefore,afterはなくなります。example2">本文</div>【方法2】display:noneを指定する見えなくなればいいのであればbefore,afterに「display:none」を指定して消してしまうのも一つの手です。「消すといえばdisplay:none」という知識があればわかりやすいでしょう。example3">本文</div>【方法3】content:initialを指定する(IEで効かない)initialは解除する(初期値にする)CSSの値でどのCSSにも使えます。IEを無視できる場合はinitialで解除できます。before、afterの場合contentにinitialを指定しましょう。初期値である「content:none」になります。結果は【解除方法1】で説明した通りです。【まとめ】before、afterを消す方法content:noneを指定するdisplay:noneを指定するcontent:initialを指定する(IEで効かない)以上、CSSのbefore、afterを消す方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。