jQueryで共通ナビの現在地をアクティブ時のcssがうまくいかない

Question

カレントの実装で、アクティブになっている時だけテキスト直下にborder線出したいのですが、<span>タグにも現在のURLとナビのリンクURLがマッチしたらクラスを付与するにはどうすればよろしいでしょうか？
<span>タグにつけたいのは、aタグにつけるとリンクするエリアが大きいためborder線とテキストの間が大きくあいてしまうためです

$(document).ready(function() {
if(location.pathname != "/") {
$('.nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
$(this).find('.linear').css('border-bottom', ' 1px solid black');
} else $('.nav a:eq(0)').addClass('active');
});

<ul class="nav">
<li class="nav-item"><a class="navbar-link" href="/test/"><span class="linear">home</span></a></li>
</ul>

Answer 1

<span>タグにクラスを付与しなくても、
a.active .linear というようなCSSセレクタで<span>タグに下線を付ければいいのでは。