CSSのbefore、afterを消す方法

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で存在させていることがわかります。

<style>
.example{
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
    margin: 10px 0;
}
.example::before{
    content: "before";
    border: 1px solid #999;
    background: #fff;
}
.example::after{
    content: "after";
    border: 1px solid #999;
    background: #fff;
}
</style>
<div class="example">本文</div>

さて、下記より本題のbefore、afterの解除方法について3種類紹介します。

【方法1】content:noneを指定する

contentはbefore,afterを指定する際に絶対に必要なCSSです。これを指定しないとbefore,afterは使えません。

同じように「content:none」を指定するとbefore,afterはなくなります。

<style>
.example{
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
    margin: 10px 0;
}
.example::before{
    content: "before";
    border: 1px solid #999;
    background: #fff;
}
.example::after{
    content: "after";
    border: 1px solid #999;
    background: #fff;
}
.example2::before,.example2::after{
    /*コレ*/content: none;
}
</style>
<div class="example example2">本文</div>

【方法2】display:noneを指定する

見えなくなればいいのであればbefore,afterに「display:none」を指定して消してしまうのも一つの手です。

「消すといえばdisplay:none」という知識があればわかりやすいでしょう。

<style>
.example{
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
    margin: 10px 0;
}
.example::before{
    content: "before";
    border: 1px solid #999;
    background: #fff;
}
.example::after{
    content: "after";
    border: 1px solid #999;
    background: #fff;
}
.example3::before,.example3::after{
    /*コレ*/display: none;
}
</style>
<div class="example example3">本文</div>

【方法3】content:initialを指定する（IEで効かない）

initialは解除する（初期値にする）CSSの値でどのCSSにも使えます。

ただし、IEには効きません。

IEを無視できる場合はinitialで解除できます。

before、afterの場合contentにinitialを指定しましょう。

初期値である「content:none」になります。結果は【解除方法1】で説明した通りです。

【まとめ】before、afterを消す方法

1. content:noneを指定する
2. display:noneを指定する
3. content:initialを指定する（IEで効かない）

以上、CSSのbefore、afterを消す方法でした。