Как сделать нижнее подчеркивание ссылки намного ниже?

Question

[vtaeke]

Всем привет, как подчеркнуть ссылку ниже, чем обычно, а опустить ее на допустим 20px ниже?
Нужно сделать вот так, никак не могу понять.

<div class="navigation">
                <nav class="menu__item-active"><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="">
                    <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.5455 9.11273C15.5455 13.182 12.2554 16.3855 8.27273 16.3855C4.20347 16.3855 1 13.0954 1 9.11273C1 5.04346 4.29005 1.84 8.27273 1.84C12.2554 1.84 15.5455 5.13004 15.5455 9.11273Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
                        <path d="M13.0362 14.6538L20.3089 21.84" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>  
                </a>
            </nav>
            </div>

.navigation {
  display: flex;
  position: relative;
}

.active::before {
  content: '';
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #FFBC5B;
}

Comments

[Александр]

nav a, nav a, nav a, nav a. Не жирно будет? Почитайте про nav на MDN.

[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.

p.s. Про свойство text-underline-offset. С виду кажется, что оно может помочь, но если пункт меню будет в две строки - линии тоже будет две.

Answer 1

[Nik Faraday]

Ответ тут