【CSS】beforeとafterの順番

「beforeとafterってどっちが前だっけ？」

「beforeとafterの順番を入れ替えるにはどうするんだっけ？」

beforeとafterの順番を解説します。

【テキストの場合】beforeが先、afterが後

beforeは要素の前、先、左につきます。

afterは要素の後、右につきます。

これが基本です。

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

【position:absoluteの場合】beforeが奥、afterが手前

before・afterでアイコンを作る場合、position:absoluteで位置を調整します。

beforeとafterを重ねるとき順番を間違うと一方が一方に隠れて見えなくなってしまいます。

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>

【順番を変えたい場合】z-index

afterを奥に、beforeを手前にする場合は「z-index」を使います。

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

この場合はbeforeに「z-index: 1」を指定しましょう。

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

【まとめ】beforeとafterの順番

【テキストの場合】beforeが先、afterが後

【position:absoluteで重ねる場合】beforeが奥、afterが手前

【重ねる順番を変えたい場合】z-index

以上、beforeとafterの順番でした。