Активные кнопки с красной чертой

.site-navigation {
  list-style: none;
}

.site-navigation a,
.user-navigation a {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--basik-black);
  text-transform: uppercase;
}

.site-navigation-link:not([href]) {
  border-bottom: 2px solid var(--basik-light-red);
  padding-bottom: 5px;
}

.site-navigation a:hover,
.user-navigataion a:hover {
  color: var(--basik-light-red);
}

.site-navigation a:active,
.user-navigation a:active {
  color: var(--basik-black);
  opacity: 0.3;
}

<header class="main-header">
  <div class="container">
  <nav class="main-navigation">
    <div class="main-navigation-wrapper">
      <a class="main-header-logo" href="index.html">
        <img src="img/logo/nerds-logo.svg" width="160" height="65" alt="Логотип сайта Нёрдс">
      </a>
        <ul class="site-navigation">
          <li class="site-navigation-item">
            <a class="site-navigation-link" href="#">Студия</a></li>
          <li class="site-navigation-item">
            <a class="site-navigation-link" href="#">Клиенты</a></li>
          <li class="site-navigation-item">
            <a class="site-navigation-link" href="catalog.html">Магазин</a></li>
          <li class="site-navigation-item">
            <a class="site-navigation-link" href="#">Контакты</a></li>
        </ul>
        <div class="user-navigation">
          <a class="user-link" href="#">
            <img src="img/icons/cart-icon.svg" width="15" height="11" margin-right="5">Корзина</a>
        </div>
    </div>
  </nav>
  </div>
</header>