Как border опустить вниз?

Question

[vtaeke]

Всем привет, мне нужно сделать вот такую штуку. Подчеркивание опустить вниз (border_bottom) и сделать данную ссылку активной.
Но проблема в том что opacity все перебивает и ничего не получается.
И еще к тому же icon__search не меняет своего цвета.
Не как не могу разобраться, где мог ошибиться.

А должно быть вот так

div class="navigation">
                <nav class="menu"><a class="menu__a active" href="">Мое кино</a></nav>
                <nav class="menu"><a class="menu__a" href="">Магазин</a></nav>
                <nav class="menu"><a class="menu__a" href="">Покупки</a></nav>
                <nav class="menu">
                  <a class="menu__a" href="">
                      <img class="icon__search" src="./img/icon_search.png" alt=""/>
                  </a>
                </nav>
              </div>

.navigation {
  display: flex;
}

.active {
  color: #FFBC5B;
  border-bottom: 2px solid #FFBC5B;
}

.menu__a {
  font-style: normal;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-transform: uppercase;

  color: #FFFFFF;
  opacity: 0.3;
}

.active:active {
  background: #FFBC5B;
}

.menu__a:hover {
  color: #FFBC5B;
  opacity: none;
}

.icon__search:hover {
  color: #FFBC5B;
}

Comments

[Ankhena]

1. nav - это основная навигация по странице. Внутри nav хорошо бы сделать список, а уже в нем ссылки.
2. Опустить бордер = увеличить расстояние между границей и текстом = padding
3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна.
4.

и сделать данную ссылку активной

Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо aria-current="page" и селектор по атрибуту.
5.

Но проблема в том что opacity все перебивает

Либо убирайте при наведении и у активной либо задавайте цвета через rgba
6.

И еще к тому же icon__search не меняет своего цвета.

Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.