WordPress 文字色が変わらない理由

WordPressでコーポレートサイトのテーマをつくる課題に取り組んでいる者です。

書いたコード↓

index.php

1<div id="header_navi"> 2 <a href="<?php echo esc_url(home_url()); ?>#header_logo" class="animate-border-link">トップページ</a> 3 <a href="<?php echo esc_url(home_url()); ?>#business" class="animate-border-link">事業内容</a> 4 <a href="<?php echo esc_url(home_url()); ?>#BUSINESS" class="animate-border-link">会社情報</a> 5 <a href="<?php echo esc_url(home_url('/category/news/')); ?>" class="animate-border-link">お問い合わせ</a> 6</div> 7

style.css

1.animate-border-link { 2 text-decoration: none; /* デフォルトの下線を非表示にする */ 3 color: #38A1DB; /* 文字色 */ 4 background-image: linear-gradient(90deg, #38A1DB, #38A1DB); /* 線の色 */ 5 background-repeat: no-repeat; 6 background-position: left bottom; /* 線の起点を左・下に設定 */ 7 background-size: 0 2px; /* 線の横幅を0、縦幅を1pxに */ 8 transition: background-size 0.6s; /* 線を伸ばすアニメーション実行時間を指定 */ 9} 10 11.animate-border-link:hover { 12 background-size: 100% 1px; /* 線の横幅を100%にする */ 13} 14 15#header_navi a:hover { 16 color: #38A1DB; /* 文字色 */ 17}

ヘッダーのナビゲーションに↓の4つを設定してます。

トップページ
事業内容
会社情報
お問い合わせ

４つのリンクのホバー時に、↓の2つの効果を実現したいです。
・文字色を変える
・下線が左から右にフェードインする

しかし、style.cssの3行目↓が機能せず、文字色が変わりませんでした。

color: #38A1DB; /* 文字色 */

なので、style.cssの最後に↓を書いたら、文字色が変わりました。

#header_navi a:hover { color: #38A1DB; /* 文字色 */ }

.animate-border-link { の3行目に、「color: #38A1DB; /* 文字色 */」を入れただけでは、文字色が変わってくれないのでしょうか？

結果オーライではあるのですが、理由がわからず、釈然としません。
なぜなのでしょうか。