Как это сверстать?

Question

[fr1nd4]

Как сделать так, что бы при наведении на каждый из элемент, он становился жирным и над ним появлялась эта штука

Answer 1

[Максим]

Я не захотел вставлять SVG в HTML и по тому вставил через JS, если вас такой результат не устроит(использование javascript) то открываете HTML в инспекторе кода копируете HTML CSS и используете как есть

Comments

[fr1nd4]

Превосходно
Все как надо

[fr1nd4]

Как можно кстати к потолку эту синюю штуку прикрепить?

[Максим]

fr1nd4, исправил

[Максим]

fr1nd4, исправил

Answer 2

[approximate solution]

link:hover {
font-weight: 700;
}

link:before {
//-- тут описываете полосу, её положение, и тд.
}

link:hover:before{
//-- описываете поведение полосы при наведении на link
}

Comments

[fr1nd4]

Спасибо
Кстати не подскажешь что я делаю не так?

<nav class="header__navs">
						<a href="#" class="nav__item">Услуги</a>
						<a href="#" class="nav__item">Проекты</a>
						<a href="#" class="nav__item">Компания</a>
						<a href="#" class="nav__item">Контакты</a>
						<a href="#" class="nav__item">Обучение</a>
					</nav>

.header__navs {
        grid-area: navs;
        justify-self: center;
        align-self: center;
        font-family: Montserrat;
        font-style: normal;
        font-size: 1em;
        a {
            margin-right: 1.5rem;
            color: #7D8797;
            font-weight: 400;
            margin-bottom: 0rem;
            transition: .3s;
            &:hover {
                margin-bottom: .5rem;
                font-weight: 600;
                color: #292930;
            }
        }
    }

Текст становиться жирным, но не поднимается, что не так?

[Вадим]

fr1nd4, transform: translateY(-5px)

[fr1nd4]

Вадим, не работает (

[approximate solution]

fr1nd4,

[Максим]

approximate solution, на само деле не работает