【CSS】before・afterを3つ以上複数使えるか？

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

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

「でもbefore・afterの2つじゃ足りない！3つ以上複数使いたいのだが!?」

疑似要素に疑似要素の指定は可能なのか？before・afterを複数(3つ以上)使えるか？

上記について解説していきます。

【結論】使えない

残念ながらhtmlタグにつき、before・afterそれぞれ一つずつしか使えません。

下記は疑似要素に疑似要素を指定してみた例です。やはり効いていません。

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

では、3つ以上要素を使いたいときはどう工夫すればいいのでしょうか。

【解決方法】spanなどhtmlタグを増やす

疑似要素を増やせない以上、htmlタグそのものを増やすしかありません。

htmlタグを増やすとそのタグにつき2つの疑似要素が使えるようになります。

下記サンプルの白い縦線はbefore・afterです。

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

.example2のbefore・afterと、.example2の子要素のspanのbefore・afterを使い4本の線にしています。

「position: absolute」は「親が基準」ではなく「static以外のpositionが指定された直近の先祖要素が基準」です。

そのためspanの位置は無視され、.example2の位置が基準となります。

before・afterをもっと使いたい場合はspanを増やしていきましょう。

【まとめ】before・afterを複数使えるか？

htmlタグにつき、before・afterそれぞれ一つずつしか使えない。

before・afterを複数使うなら、htmlタグそのものを増やす。

以上、before・afterを複数(3つ以上)使えるか？について解説しました。