0

У меня есть header, у меня в нём есть навигация, при наведении на ссылку я сделал border-bottom: 3px solid #fff;**** но у меня из-за этого начало "подпрыгивать" элемент. Резервировать место я уже пробывал, не помогло.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

header {
  display: flex;
  justify-content: space-around;
  height: 60px;
  background-color: blue;
  align-items: center;
  position: relative;
}

header li {
  list-style: none;
}

header ul li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px;
} 


header nav ul li {
  display: block;
  float: left;
  margin: 5px 20px;
}

header nav ul li a:hover {
  border-bottom: 2px solid #fff;
  border-radius: 3px;
}
<header>
        <nav class="left-container">
                <ul class="left-links">
                    <li><a asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
        </nav>
             <nav class="right-container">
                <ul class="left-links">
                    <li><a asp-controller="Account" asp-action="Login">Login</a></li>
                    <li><a asp-controller="Account" asp-action="Register">Register</a></li>
                </ul>
            </nav>
        </div>
        
    </header>

2 ответа 2

2

Сразу ставим нижний бордер, но делаем его прозрачным. А при ховере только меняем цвет. И всё. Можно также через псеводэлементы. Но первый способ проще в данном случае.

header nav ul li a {
  border-bottom: 2px solid transparent;
  border-radius: 3px;
}

header nav ul li a:hover {
  border-color: #fff;
}
1

Увеличьте высоту ссылок. Например

header ul li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding-bottom: 2px;
  height: 23px;
} 

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.