【Web制作】メニューリンクにマウスホバー時の動きをつける＋ページ内リンクでクリックした要素に下線を引く方法

a {
  transition: all 0.3s ease 0s;
}
a:hover {
  opacity: 0.6;
}

a {
  transition: all 0.3s ease 0s;
  &:hover {
    opacity: 0.6;
   }
}

<ul class="header__nav">
            <li ><a href="" class="is-active">Card</a></li>
            <li><a href="" >News</a></li>
            <li><a href="">Price</a></li>
            <li><a href="" >Access</a></li>
            <li><a href="" >Contact</a></li>
        </ul>

.header__nav{
             margin-left: auto;
             display: flex;
     li{
         &:not(:first-child){
          margin-left:40px;
         }
             a{
               color: #FFF;
               text-decoration: none;
               position: relative;
               &::after{
                content: "";
                position: absolute;
                bottom: -12px;
                left: 0;
                width: 100%;
                height: 2px;
                background: transparent;
                transition: all 0.3s ease 0s;
                }
                &:hover,
                &.is-active{
                  &::after{
                   background:#E81919;
                   }
                }
               }
          }
 }

<nav class="header__nav">
  <ul>
    <li><a href="#card　class="is-active">Card</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#price">Price</a></li>
    <li><a href="#access">Access</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<section id="card" class="card">・・・</section>
<section id="news" class="news">・・・</section>
<section id="price" class="price">・・・</section>
<section id="access" class="access">・・・</section>
<section id="contact" class="contact">・・・</section>

jQuery('a[href^="#"]').on('click' , function() {
  // スムーススクロールの処理を書く
  //headerの位置(高さ）を取得
  var header =jQuery('.header').innerHeight();
  var id = jQuery(this).attr('href');
  //トップに戻る(#のみ)でもアニメーションを効かせるようにするために初期値を0にする
  var position = 0;
  //もし、idが#だけじゃないなら
  if ( id != '#'){
  //offsetは位置取得（検証→コンソール→メニューリンク→位置の高さがわかる)
  var position = jQuery(id).offset().top-header;//Topからヘッダーの高さを引く
  }
  //consoleを忘れると動かないので注意！
  console.log(id);
  console.log(position);
  jQuery('html,body').animate({
    scrollTop:position
  },
  300);
});

jQuery('.header__nav li a').on('click', function() {
  jQuery('.header__nav li a').removeClass( 'is-active' );
  jQuery(this).addClass( 'is-active' );
  return false;
});