z-index　効かない

前提・実現したいこと

画像2のようなもの、実現したいのですが、z-indexは正しく実装されいるのに画像1のようにlightblueのカラーが上になってしまいます。

発生している問題・エラーメッセージ

なぜかは分かりませんが、-webkit-text-fill-colorを消すとz-indexが効くことができます。
ですが、-webkit-text-fill-colorも適応したいので、両方適応させつつ実現する方法をご教示お願いたします。

該当のソースコード

実装したら、画像の様になります。

.text {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-size: 40px;
  /* グラデーションcolor */
  background-image: linear-gradient(to top, #1d2088, #337cc7);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}
.text::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #d3edfb;
  z-index: -1;
}

行動規範の内容に同意します

回答1件

ベストアンサー

z-index では、子は親を超えて移動することはできません。マイナスを設定しても親の背面へ移動できるわけではありません。
テキストはbackground-imageとbackground-clipで表示させているので親の背景ということになりますので、疑似要素は、その背面に潜り込むことはできません。

テキストを例えばspanタグで囲んで、それに対して、background-imageとbackground-clipを設定するようにすれば、テキストと疑似要素は親子関係ではなく兄弟関係になりますので z-index は効くようになります。

html
1<div class="text">
2  <span>あなたのそのお悩み</span>
3</div>

css
1.text {
2  position: relative;
3  display: inline-block;
4  font-size: 40px;
5}
6.text > span {
7  /* グラデーションcolor */
8  background-image: linear-gradient(to top, #1d2088, #337cc7);
9  background-clip: text;
10  -webkit-background-clip: text;
11  -webkit-text-fill-color: transparent;  
12}
13.text::after {
14  content: "";
15  position: absolute;
16  bottom: 12px;
17  left: 0;
18  width: 100%;
19  height: 8px;
20  background-color: #d3edfb;
21  z-index: -1;
22}