【CSS】 「疑似要素」を「親要素」より後ろに重ねる方法

こんにちは、さちです。

ウェブサイトを作っているときに、「疑似要素 ::before ::after 」を「親要素」のテキストよりも後ろに重ねるようにしたいことがありました。

z-index で簡単にできると思ったら通常とは少し違う記述が必要だったので、備忘録としてこの記事を残しておきます。

HTML・CSS のコードは、解説に必要なものだけを記載しています（装飾に関わるものは省略しています）

やりたいこと
- HTML
- 完成のイメージ
CSS を書く
- おしかった方法
- 修正したところ

やりたいこと

HTML

<div id="target">
  いつでも、いつまでも
</div>

完成のイメージ

CSS

※ 今回の内容に関係がない CSS の記述は省略しています

#target::before {
  position: absolute;
  content: "Always and Forever";
  color: white;
  rotate: -10deg;
}

疑似要素 ::before を使って、Always and Forever と入れます。

結果

「疑似要素」の Always and Forever が、いつでも、いつまでも の後ろに重なるようにします。

CSS を書く

おしかった方法

CSS

#target {
  position: relative;
  color: darkslateblue;
  z-index: 2;
}

#target::before {
  position: absolute;
  content: "Always and Forever";
  color: white;
  rotate: -10deg;
  z-index: 1;
}

#rarget を z-index: 2; に、疑似要素 #target::before を z-index: 1; にすることで、「疑似要素」が後ろに重なるようにしています。

結果

z-index による「重なり順」の変更が効かず、「疑似要素」が前に重なってしまいました。

修正したところ

CSS

#target {
  position: relative;
  color: darkslateblue;
  z-index: 1;
}

#target::before {
  position: absolute;
  content: "Always and Forever";
  color: white;
  rotate: -10deg;
  z-index: -1;
}

「疑似要素」の #target::before を z-index: -1; に変更しました。 z-index の値を「マイナス」にするのがポイントです。

結果

z-index によって「疑似要素」が後ろに重なるようになりました。

【CSS】「position: absolute;」で要素の重なり順が崩れる

こんにちは、さちです。ウェブサイトを作っているときに、CSS で position: absolute; を使うと「要素」が上手く順番に重ならないことがありました。思い通りの重なり順にするには position の仕様を理解しないといけな

【CSS】「疑似要素」を「親要素」より後ろに重ねる方法