【CSS】before・afterを重ねる方法

「before・afterでアイコンを作って要素に重ねるのはどうやるんだっけ？」

before・afterを重ねる方法を解説します。

before・afterとは

before・afterは「疑似要素」と呼ばれる要素であり、要素の前（before）、後（after）に要素を追加できるものです。

これを使うとhtmlをいじることなく、CSSだけで文字やアイコンを追加することができます。

<style>
.example::before{
    content:"before";
    color:red;
}
.example::after{
    content:"after";
    color:blue;
}
</style>
<div class="example">元の文字</div>

指定したい要素に「::before」をつけると前に、「::after」に後に要素が追加されます。要素はインライン要素です。

これに「display:block」を指定してアイコンとして利用することもよくあります。

なお、文字を使わない場合でも「content:"";」は必須です。

before・afterを親要素に重ねる

先述したように「before・after」はアイコンとして使うことがあります。

その場合、親要素に重ねることが多いでしょう。

beforeやafterを親要素に重ねる方法を解説します。

position:absoluteで重ねる

下記の左にある白い縦棒はbeforeです。これを親要素に重ねています。

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

要素を重ねるには「position:absolute」を利用します。

まず親要素に「position: relative」を指定します。これを指定することで基準ができます。

そして重ねるbeforeやafterには「position:absolute」を指定します。

なお、「position:absolute」で位置を任意で指定するためbeforeでもafterでもどちらでもOKです。

あとはleftやtopで位置を調整しましょう。

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

注意点としてbeforeやafterをアイコンとして利用する際は「content:""」を忘れないようにしましょう。

また、アイコンの場合widthを使うでしょうから「display: block」も忘れないようにしましょう。

beforeをafterに重ねる

下記の白い丸はbefore、オレンジの三角はafterで、これらを重ねています。

<style>
.example3{
    padding: 10px 0 10px 50px;
    background: #eb762e;
    color: #FFF;
    position: relative;
}
.example3::before{
    content:"";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFF;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}
    
.example3::after{
    content:"";
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid #eb762e;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="example3">サンプル</div>

beforeをafterに重ねることもできます。

とはいえ、基本的に先述の「before・afterを親要素に重ねる」方法と同じです。

どちらも親が基準となっているためleftやtopで調整しやすいのも特徴です。

z-indexで重なり順を指定できる

上記は「beforeをafterに重ねる」方法でしたが、逆の「afterをbeforeに重ねる」場合は注意です。

position:absoluteは重なり順が重要です。

通常、先に記述されたものが後ろとなり、後に記述されたものが前になります。

beforeは先に記述されるため後ろになり、afterは後に記述されるため前になります。

逆にするとafterが後ろに隠れて見えなくなります。

これを解決するのが「z-index」です。

z-indexは重なり順を指定するCSSです。

「afterをbeforeに重ねる」場合はbeforeに「z-index: 1」を指定しましょう。

.example::before{
    content:"";
    z-index: 1;
}

【まとめ】before・afterを重ねる方法

親要素に「position: relative」を指定。

beforeやafterに「position:absolute」を指定。leftやtopで位置を調整。

以上、before・afterを重ねる方法でした。