疑似要素で作成した図形の上に文字を置きたいです（参考コードあり）

実現したいこと

現在、WEB制作ページのコーディングを行なっているのですが、以下のURLのように実装すると、疑似要素で作成した図形が文字に被ってしまい見えません。
文字を上に配置したいのですが、色々試してみても良い方法が思いつきませんので、どなたか良い解決策を教えていただきたいです。
https://codepen.io/freeate/pen/LYamQQq

もし可能であれば参考のソースコードをいただけると大変ありがたいです。

該当のソースコード（コードペンの方が見やすいです）

HTML
1<div class="wrap">
2  <div class="card">
3    <div class="label">Label01</div>
4    <div class="title">
5      タイトル<span>サブテキスト</span>
6    </div>
7    <p>テキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキスト</p>
8  </div>
9</div>

CSS
1.wrap{
2  width:100vw;
3  height:100vh;
4  background:#ccc;
5  padding-top:200px;
6}
7
8.card{
9  width:60vw;
10  margin:0 auto;
11  background:#fff;
12  padding:50px;
13  position:relative;
14}
15
16.card::before{
17  content:"";
18  position:absolute;
19  top:0;
20  left:0;
21  width:100px;
22  height:100px;
23  background:#ff00ff;
24}
25
26.title{
27  font-size:30px;
28  font-weight:bold;
29  z-index:1;
30}
31.title span{
32  font-size:14px;
33  font-weight:normal;
34  margin-left:20px;
35  z-index:1;
36}

試したこと

・疑似要素では無くdivタグで配置してz-indexで配置変えをしてみてもダメでした。
・beforeとafter両方試しても同じ状態でした。

補足情報

z-indexが効かないのは調べたところpositionのエラー？っぽいのですが、無理やりpositionで上に配置するのはレスポンシブで調整も細かく必要なので避けたいです。理由として実際のカードコンテンツはliで複数生成しており記載している内容も少し違う（テキストの部分に表を配置する場合もある）ので、どのような内容でも上に被らず配置できるようにしたいです。

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

回答1件

ベストアンサー

diff
1 .card{
2   width:60vw;
3   margin:0 auto;
4   background:#fff;
5   padding:50px;
6+  z-index: 0;
7   position:relative;
8 }
9 
10 .card::before{
11   content:"";
12+  z-index: -1;
13   position:absolute;
14   top:0;
15   left:0;
16   width:100px;
17   height:100px;
18   background:#ff00ff;
19 }