ホームへ

【CSS】beforeとafterの順番

2021年12月29日

「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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

【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の順番でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ