0

введите сюда описание изображения

Как сверстать такое лучше всего? Я сверстал эффект при наведении, но я не знаю как сделать эту линию и чтобы эффект входил туда.

body { background-color: #555; } 

.header-nav-menu {
  margin-top: 92px;
}

.header-nav-menu a {
  text-decoration: none;
  color: #fff;
  font-family: "Sansation Light";
  margin-left: 121px;
  position: relative;
  display: inline-block;
}

.header-nav-menu a::before {
  display: block;
  position: absolute;
  content: "";
  height: 2px;
  width: 0;
  background-color: #ff7979;
  transition: width .5s ease-in-out, left .5s ease-in-out;
  left: 50%;
  bottom: 0;
}

.header-nav-menu a::after {
  display: block;
  position: absolute;
  content: "";
  height: 2px;
  width: 0;
  background-color: #ff7979;
  transition: width .5s ease-in-out;
  left: 50%;
  bottom: 0;
}

.header-nav-menu a:hover::before {
  width: 50%;
  left: 0;
}

.header-nav-menu a:hover::after {
  width: 150%;
}

.header-nav-menu li {
  display: inline;
  list-style-type: none;
}
<ul class="header-nav-menu">
  <li><a href="#">Обо мне</a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

2

1 ответ 1

1

Как-то так

.nav {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  box-shadow: 0 -2px 0 0 #999 inset; /* Создадим полосу под меню */
  box-sizing: border-box;
}

.nav a {
  display: inline-block;
  float: left;
  height: 48px;
  line-height: 50px;
  border-bottom: 2px solid transparent; /* Изначально будет нижний бордюр, но без цвета */
  padding: 0 10px;
  margin-right: 5px;
  cursor: pointer;
  text-decoration: none !important;
}

.nav a:last-child { /* Фикс, кек */
  margin-right: 0;
}

.nav a:hover {
  border-bottom-color: red; /* При наведение ставим цвет */
}
<div class="nav">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
  <a href="">Link 4</a>
  <a href="">Link 5</a>
</div>

Ваш ответ

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

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