slick.jsの画像にブラックフィルターをかけたい

前提・実現したいこと

ワードプレス内にある slick.jsの画像にブラックフィルターをかけたいです

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

親テーマのtop-slider.php (template-parts/top-slider.php)にブラックフィルター用のクラスを書く→保存するもなぜか反映されません

該当のソースコード

<div id="top-slider-item<?php echo esc_attr( $i ); ?>" class="top-slider-item"><span>
<!--start--><!--追加するも何故か反映されず-->
<div class="black_filter"></div>
<!--end-->
</span></div>

.black_filter{
background-color: rgba(0, 0, 0, 0.25);
border-color: rgba(0, 0, 0, 0.5);
}

試したこと

⚫︎他のコードを編集→反映されるか確認→反映されます
⚫︎キャッシュ削除
⚫︎各ブラウザアプリで確認
⚫︎デベロッパーツール上でhtml/css編集するとブラックフィルターは掛かります
⚫︎ブラックフィルターはhttps://momijitan.hatenablog.com/entry/2018/01/12/000905さんの記事を参考にしました。

ワードプレスの親テーマ内に書いたコードが反映されない原因がわからず困っています