ホーム(記事一覧)へ

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の解除方法でした。

関連記事