リンクボタンにマウスオーバーした時、ボタンの文字列と背景がアニメーションで色が変わるようなcssの実装

前提・実現したいこと

該当のソースコード

HTML
1<div class="main-container container">
2    <div class="main-content  col-lg-6">
3        <div class="main-title">
4            <h1>若き力で業界に革命を</h1>
5            <div class="line"></div>
6        </div>
7        <div class="content-text">
8            <p>本文</p>
9            <div id="about" class="link-block">
10                <h2>ページ遷移&ensp;＞</h2>
11            </div>
12        </div>
13    </div>
14    <img class="col-lg-6" src="../img/about.jpg">
15</div>

css
1.main-container {
2	background-color: black;
3	color: white;
4	display: flex;
5}
6
7.main-title {
8	text-align: center;
9	padding: 80px 0;
10}
11
12.main-title h1 {
13	font-weight: bold;
14	display: inline-block;
15	padding-bottom: 5px;
16	border-bottom: solid 1px white;
17}
18
19.line {
20	margin: 50px auto 0 auto;
21	background-color: white;
22	width: 2px;
23	height: 100px;
24}
25
26.content-text p {
27	line-height: 250%;
28	letter-spacing: 1px;
29}
30
31.link-block h2 {
32	padding: 5px 10px;
33	display: inline-block;
34	border-bottom: solid 1px white;
35	cursor : pointer;
36	font-weight: bold;
37}
38
39
40@keyframes bg_slide {
41    0% {
42        transform-origin: left top;
43        transform: scaleX(0.0);
44    }
45    100% {
46        transform-origin: left top;
47        transform: scaleX(1.0);
48    }
49}
50
51.link-block h2:hover {
52    color: black;
53    position: relative;
54}
55
56.link-block :hover::before {
57    content: "";
58    width: 100%;
59    height: 100%;
60    position: absolute;
61    top: 0;
62    left: 0;
63    z-index: -1;
64    background-color: white;
65    animation: bg_slide 0.4s;
66}

試したこと

.link-block :hover::beforeでz-index: -1;を指定すると背景が変わらず、指定しないもしくはz-index: 0;以上だと背景が前面に出てきてしまい、今度は文字列隠れてしまいます。
おそらく、z-index: -1;だと親要素に隠れてしまっているのかと思うのですが、解決方法が全くわかりません。
よろしくお願いします

補足情報（FW/ツールのバージョンなど）

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

回答1件

ベストアンサー

中のテキストを<span>タグで囲む。

html
1            <div id="about" class="link-block">
2                <h2><span>ページ遷移&ensp;＞</span></h2>
3            </div>

CSSは下記のように修正。

css
1.link-block h2:hover::before { /* 修正 h2挿入 */
2    content: "";
3    width: 100%;
4    height: 100%;
5    position: absolute;
6    top: 0;
7    left: 0;
8/*    z-index: -1; 削除 */
9    background-color: white;
10    animation: bg_slide 0.4s;
11}
12
13/* 以下追加 */
14.link-block h2 span {
15  position: relative;
16}