【CSS】疑似要素のbefore,afterを複数個使いたくなったときの対処法
CSSの疑似要素である::beforeと::afterですが、テキストの頭にアイコンを付けたり要素にオシャレなボーダーを付けたりと、装飾目的でもよく使われます。
だいたいはこの2つで事足りるんですが、凝ったことをしようとすると稀に「疑似要素をもっと増やしたい…」って状態になるんですよね…今回はそんな時にどうすればいいかの対処法を紹介します。
目次
前提として、疑似要素に疑似要素を生成することは出来ない
これ昔に試したことがあるんですが、疑似要素に対して疑似要素を生成することはできません。
これは無理
<div class="content"> TEXT </div>
.content::before{
content: "A";
}
.content::before::before{
content: "B";
}
.content::before::after{
content: "C";
}
これの実行結果が下のようになってくれれば良かったんですが、実際にはエラーになります。
こうはならん
<div> B A C TEXT </div>
まぁ無理なもんは無理なので、別の方法で対処しましょう。
対処法1：諦めてHTML側で対応する
先程の実行結果を実現させるには、HTML側に”疑似”ではなく普通に要素を追加するのが一番シンプルな解決法になります。
<div class="content"> <div class="before">A</div> TEXT </div>
beforeというクラスを付けた要素を用意します。
.content .before::before{
content: "B";
}
.content .before::after{
content: "C";
}
んで、その要素に対して疑似要素の::beforeと::afterを生成します。するとこんな感じの構成になります。
実行結果
<div> B A C TEXT </div>
HTML側に手を加えなければいけないというデメリットはありますが、よほど特殊な事情がない限りこの方法を使うのが安牌です。
対処法：jQueryで要素を追加する
装飾目的でわざわざスクリプトを使うような状況が思い付かないですが、jQueryを使えば要素の追加は簡単です。
::beforeのように動作する要素の追加方法
$('.content').append('<div>びふぉー</div>');
::afterのように動作する要素の追加方法
$('.content').prepend('<div>あふたー</div>');
これをロード時に実行すればCSSで生成する疑似要素と同じような感じで扱うことが出来ますが、かなり状況が限られそうなのでやっぱりHTML側で対処するのが無難ですかね。
