リンクのaタグがクリックできず、z-indexを設定したのですが、効果がありませんでした

お世話になります。
リンクのaタグがクリックできずに調べたところ、

aタグの上に要素が重なっている

とのことでしたので、
z-indexを設定させていただいたのですが、効果がありませんでした。
装飾は省いておりますが、該当部分のコードになります。
:beforeで背景画像に色を重ねております。

html
1  <div class="row-height">
2    <div class="col-about ">
3       <a hreh="/">
4         <p class="tag">カテゴリー名</p>
5         <h3>タイトル</h3>
6         <img src="/images/btn1.svg">
7       </a>
8    </div>
9    <div class="col-about ">
10       <a hreh="/">
11         <p class="tag">カテゴリー名</p>
12         <h3>タイトル</h3>
13         <img src="/images/btn1.svg">
14       </a>
15    </div>
16  </div>

css
1a{
2    position: relative;
3    z-index: 10;
4}
5.row-height {
6    display: flex;
7    flex-wrap: wrap;
8}
9.col-about{
10    margin-top: 20px;
11    width: 47.8%;
12    margin-right: 1%;
13    margin-left: 1%;
14    position: relative;
15    padding: 5% 0 10% 0;
16    border-radius: 20px;
17    background: url(/images/aboutbg1.jpg) no-repeat 0 0/cover;
18}
19.col-about:before {
20    content: "";
21    position: absolute;
22    top: 0;
23    left: 0;
24    height: 100%;
25    width: 100%;
26    border-radius: 20px;
27    background: rgba(55, 150, 210, 0.5);
28}
29.tag{
30    color: #fff;
31    position: relative;
32    z-index: 1;
33}
34img {
35    z-index: 1;
36    position: relative;
37    width: 20%;
38    top: 40px;
39}
40

a以外のz-indexもあるので、数字を大きくしております。
:beforeがあると効かないなどあるのでしょうか？

もしくは、z-index以外に考え方が間違っておりますでしょうか？

試したこと

css
1a{
2    position: relative;
3    z-index: 10;
4}

を追加。

aタグを<div class="col-about ">の外に出して、

html
1  <a hreh="/">
2　　　<div class="col-about ">
3　　　　　<p class="tag">カテゴリー名</p>
4        <h3>タイトル</h3>
5        <img src="/images/btn1.svg">
6     </div>
7  </a>