【CSS】before・afterで四角を作る方法

アイコンとして四角を使いたい！

画像を使わず、before・afterで四角を表現したい！

before・afterで四角を作る方法を解説します。

方法1.テキスト記号の■を使う

before・afterは本来テキストを表示する要素です。

テキストで「しかく」と打つと「■」や「□」、「◆」などが使えます。

「content:"■"」のように指定すると四角を表示できます。

<style>
.example{
    padding: 5px 0 5px 10px;
    background: #eb762e;
    color: #FFF;
    display: flex;
    align-items: center;
}
.example::before{
    content:"■";
    font-size: 200%;
    margin-right: 10px;
}
</style>
<div class="example">サンプル</div>

四角の大きさはfont-sizeで調整可能です。

サイズを変えると縦のバランスが悪くなるため、display: flexとalign-items: centerで上下中央寄せしましょう。

この四角は環境依存文字ではありませんが、環境依存文字を使うと文字化けする場合があるため気を付けましょう。

方法2.display:blockとwidthとheightを使う

before・afterをカラのhtmlタグとし、任意の形にする方法です。

四角にするにはdisplay:blockとwidthとheightを指定しましょう。

<style>
.example2{
    padding: 15px 0 15px 50px;
    background: #eb762e;
    color: #FFF;
    position: relative;
}
.example2::before{
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: #FFF;
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="example2">サンプル</div>

四角の色はbackgroundで指定します。

位置はposition: absoluteで調整しましょう。

positionについて詳しくはこちら↓

【まとめ】before・afterで四角を作る方法

方法1.テキスト記号の■を使い「content:"■"」のように指定する。

方法2.display:blockとwidthとheightを使い、任意の形を作る。

以上、before・afterで四角を作る方法でした。